Showing how events fire on the mobile web. By Andy Shora
← back to andyshora.com | Tweet this articleThis demo is specifically for viewing on mobile devices, I don't know how useful it's going to be for you. Oh well, I guess you can see how perfect things work on a desktop browser!
Please note, mobile devices have been updated significantly since this article was written. If they work for you, then great. Welcome to the future!
If you're viewing this on a desktop, you'll see the value in the red box updating all the time! Hundreds of scroll events will fire having scrolled down to here.
As you can see on mobile, the scroll events only fire at the end of the scroll. This is not a bug, it's by design.
You can easily swipe down 2000px having only fired a few touchmove events during a fast initial swipe. Sure, these will fire more frequently than scroll events, but remember to take into account all the time the mobile viewport is being auto-scrolled after you've released your finger from the screen...
That's called momentum scrolling and it's basically like the browser has handed a screenshot of the whole page to the GPU, and the screenshot is the thing being moved up the viewport during a scroll. It only 'unlocks', firing events, and allows DOM manipulation after it's come to a complete stop!
Desperately need a parallax site for mobile? Do you want to trigger animations based upon a specific scrollTop value on mobile browsers? You'll only be able to get the scrollTop value and do stuff with the DOM after the momentum scroll has come to a complete stop. Maybe it's time for a design rethink.