Question

我的弹出窗口有一个非常奇怪的问题。

我有一个网站，它会有一个像图像查看器这样的弹出窗口，带有滚动（因为内容非常大）。身体本身也有它的＆＃39;自己的卷轴。由于我不想在弹出后在网站上有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。

提前感谢您的回答!!

Answer 1

解决方案是使用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

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

1 个答案: