检测元素是否已停止动量滚动？ [英] Detect if element has stopped momentum scrolling?

问题描述

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

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

<这可能吗？使用 onscroll 事件在我的应用程序中无效。

解决方案

您可以计算滑动速度并尝试根据某个阈值确定是否会发生动量滚动。我做了一些测试，大约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（ ））{
 //将导致动量滚动，等待'滚动'事件
 waitForScrollEvent = true; 
} 
 else {
 onScrollCompleted（）; //假设没有动量滚动被启动
} 
 startTime = 0; 
}）; 
 
 scrollWrapper.bind（'scroll'，function（）{
 if（waitForScrollEvent）{
 onScrollCompleted（）; 
} 
}）; 
  

Is it possibile to detect if an element has stopped scrolling in Mobile Safari via Javascript?

I have an element that has momentum scrolling by using -webkit-overflow-scrolling:touch, and I need to detect if the element has stopped scrolling, including after the momentum affects the scroll.

Is this possible? Using the onscroll event is not working as it should within my app.

解决方案

You can calculate a swipe velocity and try to figure out if momentum scroll will occur based on some threshold value. I've done some testing and about 0.25 pixels/ms seems to be a good value.

Note: Sometimes momentum scrolling will occur for lower velocities too. The lowest velocity to cause momentum scrolling that I recorded was 0.13 (with very short delta time) so if you need a 100% perfect solution, keep on looking.

The example code also detects and deals with overscrolling.

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

这篇关于检测元素是否已停止动量滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！