Check your scroll rate here

[Shikkediel]

Just informative this post, made a pen out of curiosity if listening for the scroll event would be a big resource hogger at all. Originating from a topic on SO that had an accepted answer already. Seems to be plugged into the display refresh rate so presumably not a big deal. But the pen’s pretty funny, it shows the amount of events fired – and surprisingly showing differences across (my) browsers :

• Firefox around 60 (default smooth scroll)
• Chrome and Opera 40
• IE 20

http://codepen.io/anon/pen/xbNOdG?editors=001

var i, first = true, then, finished, triggers, elapsed;

$(window).scroll(function() {

if (first) {
i = 0;
first = false;
then = new Date().getTime();
}

i++;
clearTimeout(finished);
checkScroll();

function checkScroll() {

finished = setTimeout(function() {
elapsed = new Date().getTime()-then-150;
triggers = Math.round(1000/(elapsed/i));
first = true;
$('#log').html(triggers + '</br>events per second');
}, 150);
}
});

B-)

[Shikkediel]

Check this out – the slower rate on IE is definitely noticeable when you try to do an animation based on scrollTop :

Demonstration pen

When you scroll down at first and then scroll up again, you can see the CSS manipulation (blue background height) is lagging on the animation of the black block (using .animate()). Twenty frames a second apparently won’t cut it, MS guys…

[Shikkediel]

This scroll rate measurement turned out to be somewhat nonsensical. Can’t count the hours I’ve been analysing this scroll thing and there’s always something new to discover…

Only for smooth scroll on Firefox would it make sense. For other browsers, what appeared to be display refresh rate is actually just a measurement of how fast you can turn the mousewheel.

With IE something else is going on, I definitely count it as a new discovery (for me at least). When you write this, you would expect to get the scroll position at the moment the page starts scrolling :

$(window).scroll(function() {

    console.log($(this).scrollTop());
});

All major browsers act as expected but IE returns a position after the scroll has finished! That’s why a single mousewheel turn is throwing out some odd numbers in the pen. Other findings – the amount that is scrolled with a single mouseturn :

• FF a mere 95px in around 400ms
• Webkit 167px in virtually 0ms
• IE 222px in about 70ms

The latter explains the lagging mentioned in the previous post, I suspect…

[Shikkediel]

With the note that IE and webkit browsers are completely linear (so each mousewheel turn increases scrolling by the exact same amount) while with Mozilla just the pixel value is linear and time decreases with about a factor 0.85 with each additional turn (so a single scroll actually takes longer than multiple). The curve very much looks like swing by the way (had a look plotting it on a canvas). Nerdy stuff and merely informative…

[Author]

Posts