2

我正在设计一个专门在 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 问题，但找不到解决方案。任何想法都非常感谢。

4

2 回答 2

2

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

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

就是这样，真的。

于 2013-05-08T16:50:52.527 回答
0

如果您可以忍受较差的滚动性能，那么您可以尝试以下示例：

* 使用它来防止触摸，使浏览器不反弹 * 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 
    }
    );

}
于 2014-10-08T17:59:37.410 回答