7

I would like to try and replicate io7's safari feature, where the url and navigation bars minimize when you scroll slowly, in javascript/jquery. The first thing is to detect scroll speed, I have seen this question already, but I am doing this in a content script so I don't necessarily have the top and bottom element that they use. Is there another way to detect scroll speed?

Community
  • 1
  • 1
EasilyBaffled
  • 3,519
  • 10
  • 44
  • 80

2 Answers2

8

You could attach to the scroll event via jQuery and use a combination of timestamps and the scrollOffset to determine scroll speed by comparing the offset/time to the last scroll event before. Something like this:

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;
});

Anyways since you don't have control over navigation bar in a regular browsers I don't see the point here :/

May be you are searching for something like this: Parallax scroll with sticky header

GL Chris

Community
  • 1
  • 1
cschuff
  • 5,192
  • 3
  • 31
  • 51
  • I am trying to mimic the effect of the nav bar. I am using a content script in a chrome extension to create an overlay, and when the user scrolls down quickly I want the overlay to shrink and get out of the way. – EasilyBaffled Feb 09 '14 at 18:04
  • Well the above script will help you determine the 'quickly' part. Depending on the scroll offset you could reduce the size of your overlay resp. define a point where to hide it. What are you missing? – cschuff Feb 09 '14 at 18:29
  • 1
    Well I placed window in the mySelector spot and I am getting NaN for speedInpxPerMs. I have limited access to the page because this is a content script so that maybe part of the problem. – EasilyBaffled Feb 09 '14 at 18:36
  • Pass the element that is scrolled e.g. 'body' or '#myScrollContainer'. – cschuff Feb 09 '14 at 18:58
  • 1
    Interestingly with 'body' I get body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode. It's suggested to then use 'html' instead but that provides another NaN. I tried window and that gave me another problem so I guess the only solution is to try and insert some other element and check for that. – EasilyBaffled Feb 09 '14 at 19:21
  • did you try document.documentElement? – cschuff Feb 09 '14 at 22:30
  • 2
    I mostly get `Infinity` as result. – vsync Mar 23 '14 at 10:06
1

I tried to use cschuffs answer but something was wrong. With this problem and the joy to write a class, I just put the code in a small class, get it here: https://github.com/SocialbitGmbH/JavascriptScrollSpeedMonitor

Usage is simple:

var scrollSpeedMonitor = new ScrollSpeedMonitor(function (speedInPxPerMs, timeStamp, newDirection)
{
    console.log('Scroll speed: ' + speedInPxPerMs);
});
Thomas Kekeisen
  • 4,192
  • 4
  • 32
  • 50