检测/测量滚动速度 [英] Detect/measure scroll speed

问题描述

我正在考虑一种方法来 测量滚动事件的速度 ，这会产生某种代表速度的数字（距离）从滚动点A到B点相对于它花费的时间）。

I'm trying to think of a way to measure the velocity of a scroll event, that would produce some sort of a number which will represent the speed (distance from scroll point A to point B relative to the time it took).

---

我欢迎任何伪代码形式的建议......
我试图找到有关此问题的信息，在线但找不到任何东西。自2014年以来非常奇怪，谷歌怎么可能没有这个......很奇怪！

---

I would welcome any suggestions in the form of pseudo code... I was trying to find information on this problem, online but could not find anything. very weird since it's 2014, how could it be that there is nothing on google for this...weird!

推荐答案

var checkScrollSpeed = (function(settings){
    settings = settings || {};

    var lastPos, newPos, timer, delta, 
        delay = settings.delay || 50; // in "ms" (higher means lower fidelity )

    function clear() {
      lastPos = null;
      delta = 0;
    }

    clear();

    return function(){
      newPos = window.scrollY;
      if ( lastPos != null ){ // && newPos < maxScroll 
        delta = newPos -  lastPos;
      }
      lastPos = newPos;
      clearTimeout(timer);
      timer = setTimeout(clear, delay);
      return delta;
    };
})();

// listen to "scroll" event
window.onscroll = function(){
  console.log( checkScrollSpeed() );
};

演示页：
http://codepen.io/vsync/pen/taAGd/

简化演示：
http://jsbin.com/mapafadako/edit?js,console,output

---

为了真正的乐趣，给这个规则一个真实的网站，然后复制JS并运行它

---

For real fun, give a real website these rules, then copy the JS and run it

这篇关于检测/测量滚动速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！