javascript - 当覆盖 div 可见时如何停止页面滚动？

Question

我正在使用的页面有时会显示模态停留，其中 div（位置：固定）> div（位置：相对；宽度/高度：100%）> div（位置：绝对；左/右：50%）。

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

score 3 · Accepted Answer

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

您要做的是mousewheel在叠加层上捕获事件并阻止其默认操作。您可以使用 JavaScript 和 jQuery 来做到这一点，如下所示：

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

但是，这在 IE 和 Firefox 中不起作用。有关浏览器兼容性的详细信息，请参阅此页面。

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

score 0 · Accepted Answer

这是真的，但要同时支持 Web 应用程序的移动设备，请使用以下命令：

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

}

2 回答 2