ipad 上的可滚动 div 问题答案

【问题标题】：Issue with a scrollable div on ipadipad 上的可滚动 div 问题
【发布时间】：2013-05-02 11:27:16
【问题描述】：

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

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

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

然后我使用类

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

让可滚动的 div 正确滚动。最后，我使用了一些 javascript 来阻止文档本身的过度滚动，同时允许可滚动的 div 和列表：

$(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 问题，但找不到解决方案。任何想法都非常感谢。

【问题讨论】：

为了快速修复它，你可以在你的班级设置一个最小高度。
这不是那么简单，因为可滚动的类在不同的地方，高度在运行时动态确定。

标签： html css ipad scroll overscroll

【解决方案1】：

经过这么多的斗争，答案结果很简单：当滚动开始时，计算内容的总大小并将其与可滚动元素的大小进行比较 - 如果内容较小，则阻止滚动.所以，最后一个函数从

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

就是这样，真的。

【讨论】：

虽然这个问题有点老了，但我试图解决同样的问题，并且解决方案有效，但可以通过更改代码来概括和简化一点（并且可能更快一点）在 body touchmove 监听器到：if($(this).get(0).scrollHeight > $(this).innerHeight()) { e.stopPropagation(); }
现在是原始答案 (stackoverflow.com/a/14244680/40352)。一种危险是并非所有浏览器都完全支持 scrollHeight。

【解决方案2】：

如果你能忍受糟糕的滚动性能，那么你可以试试这个例子：

* 使用它来防止触摸，使浏览器不会弹跳* http://gregsramblings.com/2012/05/23/preventing-vertical-scrolling-bounce-using-javascript-on-ios-devices/

var xStart, yStart = 0;
document.addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
});
document.addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

* 使用它来捕捉向下或向上滑动，以便您可以制作自己的滚动 *

function init_swipe()
{

    x$("#main_body").swipe(
    function(e, data){
            if (data.direction == 'down')
            {
                var offset=window.scrollY+data.deltaY*100;
                $('html,body').animate({scrollTop: offset},200);
            }
            if (data.direction == 'up')
            {
                var offset=window.scrollY+data.deltaY;
                $('html,body').animate({scrollTop: offset},200);
            }
    }, {
        swipeCapture: true,
        longTapCapture: true,
        doubleTapCapture: true,
        simpleTapCapture: false,
        preventDefaultEvents: false 
    }
    );

}

【讨论】：