如何防止文档滚动

如何防止文档滚动

本文介绍了如何防止文档滚动,但允许滚动在iOS和Android的网站上的div元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I created a website with jQueryMobile for iOS and Android.

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

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

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

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

我如何解决这个问题?

推荐答案

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

Finally, I got it to work. Really simple:

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

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

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

08-16 04:26