當覆蓋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(); 

}