准确捕获移动设备上的 'scrollend' 事件

Question

在移动元素上使用 -webkit-overflow-scrolling: touch; 样式时，捕获 scroll 事件可能会非常烦人，因为它们由 'flicking'、'panning' 触发，并且当滚动本身停止。

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

我已经围绕 SO 和网络进行了大量研究，并确定唯一可行的解决方案（我能想到的）是创建一个函数来捕获滚动的第一次触摸，忽略任何后续pan'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
    }
});

Answer 1

您可以使用jquery-scrollstop插件添加滚动start/stop检测功能。

看这个例子：

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

准确捕获移动设备上的 'scrollend' 事件

Accurately Capture the 'scrollend' event on Mobile

javascript

jquery

ios

cordova

hammer.js