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

一尘不染

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

css

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

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

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

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

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

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

我该如何解决？

阅读 271

2020-05-16

共1个答案

一尘不染

终于，我开始工作了。真的很简单：

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);
});

2020-05-16