当叠加div可见时，如何停止滚动页面？

Question

我正在使用的页面有时会显示带有div的位置模式（位置：固定）＆gt; div（位置：相对;宽度/高度：100％）＆gt; div（位置：绝对;左/右：50％）。

无论是在移动设备上还是在桌面上的Chrome / Safari上，滑动仍然会在停留后面滚动页面。我可以使用JavaScript或CSS来防止这种情况，如果是这样，怎么做？

Answer 1

至少在桌面浏览器上，有两个与滚动相关的事件：scroll和mousewheel。前者在滚动元素时发生，无法阻止。

您要做的是捕捉叠加层上的mousewheel事件并阻止其默认操作。您可以使用JavaScript和jQuery这样做：

$('#overlay').on('mousewheel', function(e) {
    e.preventDefault();
});

然而，这在IE和Firefox中不起作用。有关浏览器兼容性的详细信息，请参阅this page。

在移动浏览器上似乎没有一致的方法，也没有通过OS X上的触摸板滚动。

Answer 2

这是事实，但为了支持Web应用程序的移动设备，请使用：

document.ontouchstart = function(e){ 
    e.preventDefault();

}