javascript - 如何防止文档滚动但允许在 iOS 和 Android 网站上的 div 元素内滚动？

Question

我使用 jQueryMobile 为 iOS 和 Android 创建了一个网站。

我不希望文档本身滚动。相反，只有一个区域(<div> 元素)应该是可滚动的(通过 css 属性 overflow-y:scroll )。

所以我通过以下方式禁用了文档滚动:

$(document).bind("touchstart", function(e){
    e.preventDefault();
});

$(document).bind("touchmove", function(e){
    e.preventDefault();
});

但这也会禁用文档中所有其他元素的滚动，无论是否 overflow:scroll是否设置。

我该如何解决这个问题？

Answer 1

这个仅 CSS 解决方案怎么样:

https://jsfiddle.net/Volker_E/jwGBy/24/

body 得到 position: fixed; 和你希望 overflow: scroll; 的所有其他元素。 适用于移动版 Chrome (WebKit)/Firefox 19/Opera 12。

您还会看到我对 jQuery 解决方案的各种尝试。但是，一旦您将 touchmove/touchstart 绑定(bind)到文档，无论是否未绑定(bind)，它都会阻止在子 div 中滚动。

免责声明:这个问题的解决方案在很多方面基本上都不是很好的用户体验!您永远不会知道访问者的视口(viewport)到底有多大，或者他们使用的字体大小(如客户端用户代理样式)，因此很可能重要的内容对他们来说隐藏在您的文档中。