Tastaturpfeile scrollen Hauptscrollbar anstelle von Popup

Question

Ich habe ein sehr seltsames Problem mit meinem Popup.

Ich habe eine Website, die ein Popup wie Bildbetrachter haben wird, mit Scroll (wie der Inhalt ziemlich groß ist). Der Körper selbst hat auch seine eigene Schriftrolle. Da ich nicht 2 Rollen auf der Website nach Popup, ich deaktiviert html blättern haben wollte, und aktiviert den Scroll-Körper:

html{ 
    overflow:hidden; 
} 
body{ 
    overflow-y:scroll; 
    overflow-x:hidden; 
} 
html,body{ 
    width:100%; 
    height:100%; 
    margin:0; 
} 

Während mein Pop-up festgelegt ist, und verfügt über einen eigenen Scrollbar:

#overlay{ 
    top: 0; 
    left: 0; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background: rgba(38,50,56,0.9); 
    z-index: 5000; 
    overflow-x:hidden; 
} 

Das führt zu schönen Popup, die gut gescrollt ist, aber hier ist das Problem: Wenn ich das Popup öffnen und die Tastaturpfeile drücken, scrollen sie noch das Körperelement.

Hier ist die fiddle.

Vielen Dank im Voraus für Ihre Antworten !!

Answer 1

Lösung ist das Element mit jQuery zu konzentrieren! Aber vergessen Sie nicht ad tabindex zu div (als nicht fokussierbar Standardeinstellung):

$("#show-overlay").click(function(e){ 
    $('#overlay').addClass('visible'); 
    $('#overlay').focus(); 
}); 
$("#close-button").click(function(e){ 
    $('#overlay').removeClass('visible'); 
    $('body').focus(); 
}); 

HTML:

<div id="overlay" tabindex = "-1"> 

jsfiddle