Question

是否有可能通过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
   })

发布＆＃39; scrolllfinished＆＃39;滚动停止时的事件。

Answer 3

您还可以添加一个函数，该函数以递归方式调用自身，直到元素内滚动停止为止，然后从那里调用进一步的函数。

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

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

3 个答案: