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

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

我有一个元素通过使用

-webkit overflow scrolling:touch

进行动量滚动，我需要检测元素是否停止滚动，包括动量影响滚动之后

---

这可能吗？在我的应用程序中，使用

onscroll

事件无法正常工作。

您可以计算滑动速度，并尝试根据某个阈值确定是否会出现动量滚动。我做了一些测试，大约0.25像素/毫秒似乎是一个不错的值

注意：有时速度较低时也会出现动量滚动。我记录的导致动量滚动的最低速度是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();
  }
});

var scrollWrapper=$（'#myWrapper'）；
var starTime、startScroll、WaitForScrolleEvent；
scrollWrapper.bind（'touchstart'，function（））{
WaitForScrolleEvent=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（））；
如果（deltaScroll/deltaTime>0.25
||scrollWrapper.scrollTop（）scrollWrapper.height（））{
//将导致动量滚动，等待“滚动”事件
WaitForScrolleEvent=true；
}
否则{
onScrollCompleted（）；//假设未启动动量滚动
}
起始时间=0；
});
scrollWrapper.bind（'scroll'，function（））{
如果（WaitForScrolleEvent）{
onScrollCompleted（）；
}
});

在我的例子中，这非常有效：

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”事件。

您还可以添加一个递归调用自身的函数，直到滚动在元素中停止，然后从元素中调用其他函数

isScrolling() {
  var scrollStart = <element>.scrollTop;
  setTimeout(function() {
    var scrollPos = <element>.scrollTop;
    if (scrollStart !== scrollPos) {
      this.isScrolling()
    } else {
      // Scrolling has stopped
    }
  }, 100)
}

IsCrolling（）{
var scrollStart=.scrollTop；
setTimeout（函数（）{
var scrollPos=.scrollpop；
如果（scrollStart！==scrollPos）{
这个是
}否则{
//滚动已停止
}
}, 100)
}

这太棒了！我一直在努力使一个内部div可以滚动，通过启用动量，我所有的快照逻辑都消失了。缺少两个逗号，并且未定义包装器变量。否则就太棒了！很高兴你发现它很有用。谢谢你指出错误。非常好。为它做一个演示。快速查看结果对其他人可能很有用。我不明白，您只需收听第一个滚动事件。当动量滚动发生时，它会一直发出滚动事件，直到结束。正确答案如下。这是很久以前的事了。我相信问题的关键在于，在MobileSafari上，在动量滚动过程中没有出现滚动事件。这就是上面的代码试图解决的问题。也许这已经改变了。有趣的技术，对于某些特定的用例，它甚至可以比公认的答案更好（就像我的例子一样）+1非常简单的解决方案，但我不得不将超时长度调整为一个更大的数字