javascript - 准确捕获移动端 'scrollend'事件

Question

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

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

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

如果这可以以某种方式完成，那么递增的值可以表示 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
    }
});

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