Question

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

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

就是这样，真的。

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

}

在ipad上发布可滚动的div

2 个答案: