鍵盤箭頭滾動主滾動條而不是彈出

我有一個網站，這將有一個像圖片瀏覽器彈出式，與滾動（因爲內容是相當大的）。身體本身也有自己的卷軸。因爲我不想對網站2個卷軸彈出後，我禁用HTML滾動，並啓用了身體的滾動：

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。

預先感謝您的回答！

來源

2016-05-16 gogachinchaladze

這也發生在其他的網站，我認爲，用戶必須點擊他們的鼠標在彈出之前可以用鍵盤滾動它 – diwang

是的，點擊肯定可以解決滾動問題，但不是問題本身。是不是有可能「聚焦」元素，讓它滾動而不用用戶點擊它？不知何故以編程方式點擊元素... – gogachinchaladze

解決方案是使用jquery來關注元素！但是不要忘了廣告的tabindex以DIV（作爲其默認情況下不可聚焦）：

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

來源

2016-05-16 14:14:47 gogachinchaladze

鍵盤箭頭滾動主滾動條而不是彈出

回答

相關問題