如何防止文档滚动但允许在 iOS 和 Android 网站上的 div 元素内滚动? [英] How to prevent document scrolling but allow scrolling inside div elements on websites for iOS and Android?

问题描述

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

我不希望文档本身滚动.相反，只有一个区域(一个

元素)应该是可滚动的(通过 css 属性 overflow-y:scroll).

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

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

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

我该如何解决这个问题?

解决方案

最后，我让它工作了.真的很简单:

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

I created a website with jQueryMobile for iOS and Android.

I don't want the document itself to scroll. Instead, just an area (a <div> element) should be scrollable (via css property overflow-y:scroll).

So I disabled document scrolling via:

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

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

But that will also disable scrolling for all other elements in the document, no matter if overflow:scroll is set or not.

How can I solve this?

解决方案

Finally, I got it to work. Really simple:

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

这篇关于如何防止文档滚动但允许在 iOS 和 Android 网站上的 div 元素内滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！