キーボードの矢印がポップアップの代わりにメインスクロールバー

Question

私のポップアップには非常に奇妙な問題があります。

私は画像ビューアのようなポップアップを持つウェブサイトを持っています。内容はかなり大きいので、スクロールします。 ボディ自体も独自のスクロールを持っています。 私は無効になったhtmlスクロール、ポップアップした後、ウェブサイト上で2巻の巻物を持ちたい、と身体のスクロールを有効にしなかったので：

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

を私のポップアップが固定され、それ自身のスクロールバーを持っていますが：

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

これはうまくスクロールされた美しいポップアップにつながりますが、ここでは問題があります。ポップアップを開いてキーボードの矢印を押すと、本体の要素がスクロールされます。

ここではfiddleです。

ご回答いただきありがとうございます。

Answer 1

解決策は、jqueryで要素をフォーカスすることです。しかし、（デフォルトでそのフォーカス可能ではないとして）DIVする広告のtabindexに忘れないでください：

$("#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