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

Question

我正在使用的页面有时会显示一个div（position：fixed）> div（position：relative; width/height：100％）> div（position：absolute; left/right：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(); 

}