How to determine scroll speed using jQuery?

Question

I would like to try and replicate the io7 safari function where url and navigation strings are minimized while scrolling slowly in javascript / jquery. First of all, in order to detect the scroll speed, I already saw this question, but I do it in the content of the script, so I do not have to have the top and bottom element that they use. Is there any other way to determine the scroll speed?

Answer 1

You can connect to the scroll event via jQuery and use a combination of timestamps and scrollOffset to determine the scroll speed by comparing the offset time / time with the last scroll event. Something like that:

var lastOffset = $( mySelector ).scrollTop(); var lastDate = new Date().getTime(); $( mySelector ).scroll(function(e) { var delayInMs = e.timeStamp - lastDate; var offset = e.target.scrollTop - lastOffset; var speedInpxPerMs = offset / delayInMs; console.log(speedInpxPerMs); lastDate = e.timeStamp; lastOffset = e.target.scrollTop; }); 

In any case, since you have no control over the navigation bar in regular browsers, I don’t see the point here: /

You might be looking for something like this: Parallax scroll with sticky title

GL Chris

Answer 2

I tried using cschuff answer, but something is wrong. With this problem and the joy of writing a class, I just put the code in a small class, pick it up here: https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

The use is simple:

 var scrollSpeedMonitor = new ScrollSpeedMonitor(function (speedInPxPerMs, timeStamp, newDirection) { console.log('Scroll speed: ' + speedInPxPerMs); });