键盘箭头滚动主滚动条而不是弹出

问题描述：

我有一个网站，这将有一个像图片浏览器弹出式，与滚动（因为内容是相当大的）。身体本身也有自己的卷轴。因为我不想对网站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。

预先感谢您的回答！

这也发生在其他的网站，我认为，用户必须点击他们的鼠标在弹出之前可以用键盘滚动它 – 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

键盘箭头滚动主滚动条而不是弹出

相关推荐