javascript - 以编程方式停止-webkit-overflow-scrolling

Question

-webkit-overflow-scrolling我有一个 phonegap 应用程序，它在 div中使用 iOS 本机滚动。我希望能够在用户单击按钮时手动停止正在进行的滚动（滚动回页面顶部）。这是可行的吗？

Answer 1

这在使用fastclick.js时实际上是很有可能的。该库消除了移动设备上 300 毫秒的点击延迟，并在惯性/动量滚动期间启用了事件捕获。

在包含 fastclick 并将其附加到 body 元素后，我停止滚动并转到顶部的代码如下所示：

scrollElement.style.overflow = 'hidden';
scrollElement.scrollTop = 0;
setTimeout(function() {
  scrollElement.style.overflow = '';
}, 10);

诀窍是设置overflow: hidden，它会停止惯性/动量滚动。请参阅我的小提琴，了解在惯性/动量期间停止滚动的完整实现。

Answer 2

不幸的是，目前这是不可能的。该scroll事件仅在滚动结束时触发。只要动力不断移动内容，就不会触发任何事件。您可以在图 6-1 Apple 的“ Safari Web 内容指南”中的平移手势中看到这一点。

我还创建了一个小提琴来演示这种行为。该scrollTop值是在iOS 完成动画后设置的。

Answer 3

您可以使用“touchstart”而不是“click”来捕获触摸事件，因为有时在动量滚动完成之前单击事件似乎不会被触发。试试这个 jQuery 解决方案：

$('#yourTrigger').on('touchstart', function () {
    var $div = $('.yourScrollableDiv');
    if ($div.scrollTop() === 0) {
        return false; //if no scroll needed, do nothing.
    }
    $div.addClass('scrolling'); //apply the overflow:hidden style with a class
    $div.animate({
        scrollTop: 0
    }, 600, function () {
        $div.removeClass('scrolling'); //scrolling has finished, remove overflow:hidden
    });
}

其中“滚动”类仅具有 CSS 属性溢出：隐藏，正如@Patrick-Rudolph 所说，它将停止正在进行的任何动量滚动。

.scrolling {
    overflow: hidden;
}

注意：最好使用回调函数来告知滚动动画何时结束，而不是设置计时器函数。