问题与ipad上的可滚动div [英] Issue with a scrollable div on ipad

问题描述

我正在设计一个专门在iPad上消费的HTML / JS应用程序。在应用程序中，有一些可滚动元素。

I'm designing an HTML/JS app for consumption specifically on iPad. In the app, there are some scrollable elements.

我将文档的宽度和高度分别设置为1024和768。我将视图端口设置为

I set the document's width and height to 1024 and 768 respectively. I set the view port to

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

然后使用类

.scrollable {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

最后，我使用一些javascript来停止对文档本身的过度滚动，同时允许可滚动的div和列表：

for the scrollable divs to make them scroll properly. Finally, I use a bit of javascript to stop overscroll on the document itself while allowing for scrollable divs and lists:

$(document).on('touchmove',function(e){
    e.preventDefault();
});

//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
    if (e.currentTarget.scrollTop === 0) {
        e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
        e.currentTarget.scrollTop -= 1;
    }
});

//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
    e.stopPropagation();
});

所有这些工作 - 大部分。但是有一个障碍。如果可滚动元素不包含足够的内容以要求滚动，则尝试滚动它将在整个文档上开始过度滚动。我已经阅读了数百个博客和其他SO的问题，但找不到一个解决方案。非常感谢任何想法。

All of this works - mostly. However there is one snag. If the scrollable element does not contain enough content to require scrolling, attempting to scroll it starts the overscroll on the whole document. I've read through hundreds of blogs and other SO questions, but can't find a solution to this. Any ideas are greatly appreciated.

推荐答案

经过这么多的战斗后，答案变得很简单：当滚动开始，计算内容的总大小，并将其与可滚动元素的大小进行比较 - 如果内容较小，则防止滚动。因此，最后一个函数从

After so much fighting with it, the answer turned out to be quite simple: when the scrolling starts, compute the total size of the content and compare it with the size of the scrollable element - if the content is smaller, prevent scrolling. So, the last function changes from

$('body').on('touchmove','.scrollable',function(e) {
    e.stopPropagation();
});               

更复杂

$('body').on('touchmove','.scrollable',function(e) {
    var tot = 0;
    $(this).children('li:visible').each(function() { tot += $(this).height(); });
    if(tot > $(this).innerHeight()) {
        e.stopPropagation();
    }
});

就是这样。

这篇关于问题与ipad上的可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！