Home › Forums › JavaScript › Check your scroll rate here
- This topic is empty.
-
AuthorPosts
-
April 5, 2015 at 4:33 pm #199808
Shikkediel
ParticipantJust 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-)
April 6, 2015 at 7:02 pm #199886Shikkediel
ParticipantCheck this out – the slower rate on IE is definitely noticeable when you try to do an animation based on scrollTop :
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…June 26, 2015 at 4:16 am #204220Shikkediel
ParticipantThis 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…
June 26, 2015 at 5:54 pm #204256Shikkediel
ParticipantWith 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… -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.