检测元素是否已停止动量滚动？

是否有可能通过Javascript检测元素是否已停止在Mobile Safari中滚动？

我有一个通过使用-webkit-overflow-scrolling:touch来动态滚动的元素，我需要检测元素是否已经停止滚动，包括在动量影响滚动之后。

这可能吗？ 使用onscroll事件在我的应用程序中无法正常工作。

Answer 1

您可以计算滑动速度并尝试根据某个阈值确定是否会发生动量滚动。 我做了一些测试，大约0.25像素/ ms似乎是一个很好的价值。

注意：有时动量滚动也会出现较低的速度。 导致动量滚动的最低速度是我记录的0.13（非常短的增量时间）所以如果你需要一个100％完美的解决方案，继续寻找。

示例代码还检测并处理过度滚动。

使用JQuery;

 var scrollWrapper = $('#myWrapper'); var starTime, startScroll, waitForScrollEvent; scrollWrapper.bind('touchstart', function() { waitForScrollEvent = false; }); scrollWrapper.bind('touchmove', function() { startTime = new Date().getTime(); startScroll = scrollWrapper.scrollTop(); }); scrollWrapper.bind('touchend', function() { var deltaTime = new Date().getTime() - startTime; var deltaScroll = Math.abs(startScroll - scrollWrapper.scrollTop()); if (deltaScroll/deltaTime>0.25 || scrollWrapper.scrollTop()<0 || scrollWrapper.scrollTop()>scrollWrapper.height()) { // will cause momentum scroll, wait for 'scroll' event waitForScrollEvent = true; } else { onScrollCompleted(); // assume no momentum scroll was initiated } startTime = 0; }); scrollWrapper.bind('scroll', function() { if (waitForScrollEvent) { onScrollCompleted(); } }); 

Answer 2

在我的情况下，这完美地工作：

 var timer; $(scrollWrapper).on('scroll',function(e){ if(timer){ clearTimeout(timer); } timer = setTimeout(function(){ $(this).trigger('scrollFinished'); }, 55) }) $(scrollWrapper).on('scrollFinished',function(){ // will be called when momentum scroll is finished }) 

滚动停止时发布’scrollfinished’事件。