CODEWITHSUNDEEP
javascripteventsscroll
vsync
vsync

Reputation: 130254

Detect/measure scroll speed

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).

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!

Upvotes: 29

Views: 42358

Answers (3)

vsync
vsync

Reputation: 130254

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 }

Demo page: http://codepen.io/vsync/pen/taAGd/

Simplified demo: http://jsbin.com/mapafadako/edit?js,console,output

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

Upvotes: 44

Gary Hayes
Gary Hayes

Reputation: 1788

Here is a script I just custom made for your issue. JS Bin

You can view the speed of scroll in the console log. It gives negative values for scrolling up and positive for scrolling down. The actual placement of the scroll bar is constantly updated in the scroll window for more information to glean. This should get you going in the right direction.

Upvotes: 0

Devima
Devima

Reputation: 1566

This is a simple script to give you an idea
when you start scrolling a timer increase count 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>

Upvotes: 0

Related Questions