javascript - 检测/测量滚动速度

标签 javascript events scroll

我正在想办法测量速度滚动事件,这将产生某种代表速度的数字(相对于所花费的时间,从滚动点 A 到点 B 的距离)。

我欢迎任何以伪代码形式提出的建议......
我试图在网上找到有关此问题的信息,但找不到任何东西。自从它是 2014 年以来非常奇怪,怎么可能在谷歌上没有任何东西......奇怪!

最佳答案

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.clear()
  console.log( checkScrollSpeed() );
};
body{ height:300vh }

演示页面:
http://codepen.io/vsync/pen/taAGd/
简化演示:
http://jsbin.com/mapafadako/edit?js,console,output

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

关于javascript - 检测/测量滚动速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22593286/

相关文章:

jquery - 在 jQuery 中拖动 Div - 当鼠标速度较慢时效果很好,但在鼠标快速移动时会失败

jquery - 单击后退按钮但不离开页面时防止自动滚动?

javascript - 本地文件的上次修改日期。 JavaScript

javascript - 如何增加关闭日期取决于选择下拉日期选择器

c# - BulletedList onClick 未触发

windows - 仅在 Windows 上按住按钮的 Marble Trackman Scroll

javascript - Angular : Scroll to bottom of div

java - Java 的 Rhino 实现实现了哪个 JavaScript (ECMAScript) 版本(更新策略是什么?)

javascript - HTML/JS 检测图像上的区域

c# - 您是否需要 "unwire"ASP.NET webforms 中的事件处理程序