Question

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

Answer 1

使用fastclick.js时，这实际上非常有用。 lib会移除移动设备上300ms的点击延迟，并在惯性/动量滚动期间启用事件捕获。

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

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

诀窍是设置overflow: hidden，它会停止惯性/动量滚动。请查看我的小提琴，以全面实施stop scrolling during inertia/momentum。

Answer 2

不幸的是，目前这是不可能的。只有在滚动结束时才会触发scroll事件。只要动量不断移动，内容没有事件就会被触发。您可以在Apple的“ Safari Web内容指南”中的Figure 6-1 The panning gesture中看到此内容。

我还创建了fiddle to demonstrate这种行为。在 iOS完成动画制作后，scrollTop值设置为。

Answer 3

您可以使用“touchstart”而非“click”捕获触摸事件，因为在动量滚动完成之前，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
    });
}

其中'scrolling'类只有CSS属性，overflow：hidden，正如@ Patrick-Rudolph所说，将停止正在进行的任何动量滚动。

.scrolling {
    overflow: hidden;
}

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

以编程方式暂停-webkit-overflow-scrolling

3 个答案: