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

Posted 2023-03-14

【中文标题】以编程方式停止-webkit-overflow-scrolling

【英文标题】：Programmatically halt -webkit-overflow-scrolling

【发布时间】：2013-02-08 10:51:24

【问题描述】：

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

【参考方案1】：

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

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

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

诀窍是设置overflow: hidden，它会停止惯性/动量滚动。请参阅我的小提琴以获取 stop scrolling during inertia/momentum 的完整实现。

【参考方案2】：

很遗憾，目前这是不可能的。 scroll 事件仅在滚动结束时触发。只要动力不断移动，就会触发内容 no 事件。您可以在 Apple 的“Safari Web 内容指南”中的Figure 6-1 The panning gesture 中看到这一点。

我也创建了fiddle to demonstrate这个行为。 scrollTop 值是在 iOS 完成动画之后设置的。

【讨论】：

我测试了 iOS 6.1 和 7.1 Mobile Safari，发现在动量滚动期间会触发 scroll 事件。

【参考方案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 属性 overflow:hidden，正如 @Patrick-Rudolph 所说，它将停止任何正在进行的动量滚动。

.scrolling 
    overflow: hidden;

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