Question

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

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

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

Answer 2

这是一个简单的脚本，可以在您开始滚动计时器增加计数var。

时给出一个想法

<!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>

Answer 3

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

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

检测/测量滚动速度

3 个答案: