检测/测量滚动速度

Question

检测/测量滚动速度

javascripteventsscroll

27

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

我欢迎以伪代码的形式提出任何建议...... 我试图在网上找到有关这个问题的信息，但无法找到任何东西。非常奇怪，因为那是2014年，怎么可能在谷歌上没有任何内容...太奇怪了！

- vsync

4

我正在创造一些超级酷炫的东西，它们非常酷炫，以至于在建成之前我不想透露任何信息。如果你愿意，可以查看我的其他酷炫发明 - http://codepen.io/vsync/public/ - vsync

1

我建议尝试使用setInterval函数，每隔一段时间获取并存储一个包含10个值的数组，这样你就可以得到每个时间间隔滚动条所在的十个位置的值。然后，你可以测量每个点之间的像素距离以获得速度。如果需要更准确、更平滑的测量结果，可以增加测量点的数量。 - Gary Hayes

1

先看一下这个链接：https://developer.mozilla.org/zh-CN/docs/Web/Reference/Events/wheel - Felix Kling

嗯，我在查看一个页面时没有列出滚动事件，但另一个页面有：https://developer.mozilla.org/en-US/docs/Web/Reference/Events/scroll。但是，你的问题究竟是什么？你似乎已经知道该怎么做了。 - Felix Kling

1

@vsync：这就是为什么你必须正确地执行它，即在用户停止滚动时清除先前的值：http://jsfiddle.net/hKXPP/ - Felix Kling

显示剩余17条评论

3个回答

0

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

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

- Gary Hayes

1

这种方法占用CPU过高，而且也不够精确。虽然这是一种解决方案，但在实际生活中我永远不会使用它。 - vsync

它如何给我滚动速度，我不明白。它只是打印一个越来越大的数字。 - vsync

当然，在实际应用中，你不会让它一直运行...在获取数据后，你会使用clearinterval()。你可以在按F12时查看控制台中的速度。在div中打印的数字只是滚动条的位置。我这样做是为了填充div并激活滚动条。 - Gary Hayes

在我的鼠标滚轮上，我可以让它每秒滚动最多2700像素，但如果我拖动屏幕上的滚动条，我可以达到每秒超过10,000像素。 - Gary Hayes

0

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

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

- Devima

2

为什么有人想要去不同的网页查看这个答案的代码？而且，让HTML包装有什么问题吗？如果一个新手来到这个页面，JS的HTML包装可能非常有帮助。当我学习Web开发时，这种东西对我很有帮助。答案中的代码确实做了一些可能是Devima想要的事情...但上面评论中的抱怨似乎非常愚蠢。请不要让stackoverflow变成巨魔聚集地！ - gcdev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vsync · Accepted Answer

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