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

Question

我用iOS和Android的jQueryMobile创建了一个网站.

我不希望文档本身滚动.相反,只有一个区域(一个<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文档,它就会阻碍子div中的滚动,无论是否绑定.

免责声明:解决这个问题的方法在很多方面基本上不是很好用!您永远不会知道访问者的视口究竟有多大或者他们使用的是哪种字体大小(客户端用户代理样式),因此很容易就会在文档中隐藏重要内容.

Answer 2

最后,我得到了它的工作.真的很简单:

var $layer = $("#layer");
$layer.bind('touchstart', function (ev) {
    var $this = $(this);
    var layer = $layer.get(0);

    if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = layer.scrollTop;
    var scrollHeight = layer.scrollHeight;
    var offsetHeight = layer.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;
    if (contentHeight == scrollTop) $this.scrollTop(scrollTop-1);
});

Answer 3

也许我误解了这个问题,但如果我是对的:

除了某个元素之外,您不希望滚动,因此您:

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

防止文档中的所有内容.

为什么不直接在要滚动的元素上停止冒泡？ (PS:你不必阻止touchstart - >如果你使用触摸开始选择元素而不是被阻止的点击,只需要触摸移动,因为它实际上是跟踪移动)

$('#element').on('touchmove', function (e) {
     e.stopPropagation();
});

现在关于元素CSS

#element {
   overflow-y: scroll; // (vertical) 
   overflow-x: hidden; // (horizontal)
}

如果您使用的是移动设备,甚至可以更进一步.您可以强制硬件加速滚动(虽然并非所有移动浏览器都支持此功能);

Browser Overflow scroll:

Android Browser Yes
Blackberry Browser  Yes
Chrome for Mobile   Yes
Firefox Mobile  Yes
IE Mobile           Yes
Opera Mini          No
Opera Mobile    Kinda
Safari          Yes

#element.nativescroll {
    -webkit-overflow-scrolling: touch;
}

正常:

<div id="element"></div>

本机感觉:

<div id="element" class="nativescroll"></div>