准确捕捉移动端的“scrollend”事件

Posted 2023-03-15

【中文标题】准确捕捉移动端的“scrollend”事件

【英文标题】：Accurately Capture the 'scrollend' event on Mobile

【发布时间】：2016-02-09 18:25:22

【问题描述】：

在移动元素上使用-webkit-overflow-scrolling: touch; 样式时，捕获scroll 事件可能会非常烦人，因为它们是由“轻弹”、“平移”以及滚动本身停止时触发的。

与桌面浏览器不同，这使得尝试检测元素当前正在滚动或元素何时完成滚动成为一场噩梦。

我对 SO 和网络进行了大量研究，并确定唯一可行的解​​决方案（我能想到的）是创建一个捕获滚动的第一次触摸的函数，忽略任何后续的 @987654325 @'s 然后捕获最终的滚动事件。

如果这可以通过某种方式实现，那么增加的值可以表示scrollend，只要它是偶数...

我写了以下内容，但我省略了 touch 事件，因为我真的不知道从哪里开始：

var checklist_scroll = 0; // Whenever this value is even, it means the scroll has ended
$('ul').on('scroll',function()
    checklist_scroll++; // Only do this for 'scrollstart' and 'scrollend', NOT when panning through the list
);

然后，对于任何其他事件，您可以这样做

$('li').on('tap',function()
    // Only make the elements selectable when parent is not scrolling
    if(checklist_scroll%2===0)
        // Select the li
    
);

【问题讨论】：

scrollstart、stop 事件仅在 jquery mobile 中提供。使用 jquery 你只有滚动。如果你想检测滚动开始，停止你需要添加一个库——github.com/ssorallen/jquery-scrollstop——在这里也检查一个可能的滚动解决方案——***.com/questions/9144560/…

@Tasos 请您在答案中发布指向滚动停止的链接，因为我能够使用它解决我的问题。一旦你发布了答案，我可以用代码编辑它，然后接受它作为答案给你信用:-)

【参考方案1】：

您可以使用jquery-scrollstop插件在功能上添加滚动开始/停止检测。

看这个例子：

var scrolling = false;
$('#some_element').on('scrollstart',function()
    scrolling = true;
);
$('#some_element').on('scrollstop',function()
    scrolling = false;
);

$('#some_tappable_element').hammer().on('tap pressup',function()
    // Use a timeout to ensure the scrolling var has been updated
    setTimeout(function()
        if(!scrolling)
            // Select the element
        
    ,10);
);

【讨论】：

非常感谢您！这些事件不会像您期望的那样触发，但它们运行良好，足以为问题提供可行的解决方案。

@Ben Carey——看起来不错。我假设您有时间问题-您是否尝试过在 (scrollstop) 函数中使用 (setTimeout(function() .. ) 而不是 (tap)？

这不是一个真正的时间问题，我真的希望它。因为tap 事件和scrollstop 事件同时触发，scrolling var 在tap 函数执行时已经设置，所以它必须延迟一点才能捕捉到正确的值。我可能可以通过将超时值设置为 1 来逃避，但我想确定一下，因为它对用户没有任何不同，所以应该没问题

@Ben Carey -- 好的，它按预期工作 -- 请记住，hammer js 有设置并且可能能够调整阈值限制，当我使用hammer 时，我玩弄了这些，他们一定要有所作为——hammerjs.github.io/recognizer-tap