检测/测量滚动速度答案

【问题标题】：Detect/measure scroll speed检测/测量滚动速度
【发布时间】：2015-11-14 23:39:55
【问题描述】：

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

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

【问题讨论】：

出于好奇，您为什么想知道这些信息？
我正在构建一些超级酷的东西，它太酷了，在它建成之前我不想说任何话。真正的。如果您愿意，请查看我的其他很酷的发明 - codepen.io/vsync/public
我可能会尝试创建一个 setinterval 来检查抓取并存储一个可能包含 10 个值的数组，因此对于每个间隔的滚动条所在的十个位置，您将有十个值。然后，您可以测量每个点之间的像素距离以获得速度。如果您需要更准确、更流畅的测量，请做十多个测量点。
先看看这个：developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
@vsync：这就是为什么您必须正确执行此操作的原因，即在用户停止滚动时清除先前的值：jsfiddle.net/hKXPP

【解决方案1】：

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 并运行它

【讨论】：

我想问一下为什么要设置时间timer =0和设置timer && clearTimeout(timer); timer =setTimeout(clear,30);
@Luke - 我现在不得不重新学习代码，因为我完全忘记了我在这里做了什么。我已经更新了一点，现在可能更清楚了
我还没有在我的项目中使用它，但我看到一些可能是问题，滚动后增量为 1 或 -1，而它应该为 0。
@Alqin - “滚动后”是什么意思？
我使用笔记本电脑的触摸板，用两根手指滚动，在滚动结束时（如果有此类事件，则滚动）delta 的值始终为 1 或 -1。

【解决方案2】：

这是我刚刚为您的问题定制的脚本。 JS Bin

您可以在控制台日志中查看滚动速度。它为向上滚动提供负值，为向下滚动提供正值。滚动条的实际位置在滚动窗口中不断更新，以收集更多信息。这应该会让你朝着正确的方向前进。

【讨论】：

这种方法锤CPU是不行的，也不是那么精确。虽然这是一个解决方案，但它永远不会是我在现实生活中实际使用的东西。
以及它如何为我提供滚动速度，我不明白。它只是打印一个越来越大的数字。
当然你不会让它在真正的应用程序中运行......一旦你得到你的数据，你会使用 clearinterval() 。你可以在console.log中看到速度，按F12就可以看到。它在 div 中打印的数字只是滚动条的位置。我这样做是为了填满 div 并激活滚动条。
在我的鼠标滚轮上，我可以让它每秒最多滚动 2700 像素，但是如果我在屏幕上拖动滚动条，我可以达到每秒 10,000 像素以上。

【解决方案3】：

这是一个简单的脚本，可让您了解
当您开始滚动计时器时增加计数变量。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{height:2000px;}
#get{position:fixed;top:0px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var timer = null;
    var count=0
    $(window).on('scroll', function() {
        if(timer !== null) {
            clearTimeout(timer); 
        }
        function increase(){
             count++
             timer = setTimeout(increase,50)
            }
        increase()
     });
    $('#get').click(function(){
        alert(count)
        count=0
        })
})
</script>
</head>
<body>
<input name="" type="button" id="get" value="getTime">
<body>
</html>

【讨论】：

为什么有人想去不同的网页查看这个答案的代码？使用 HTML 包装有什么问题？如果新手来到这个页面，JS 的 HTML 包装可能会很有帮助。当我学习 Web 开发时，这种事情对我很有帮助。答案中的代码确实做了，嗯，这可能是 Devima 的意图......但上面评论中的抱怨似乎荒谬愚蠢。请不要将 stackoverflow 变成巨魔聚会！