top: 600px
top: 700px
top: 800px
top: 900px
top: 1000px
top: 1100px
top: 1200px
top: 1300px
top: 1400px
top: 1500px
top: 1600px
top: 1700px
top: 1800px
top: 1900px
top: 2000px
top: 2100px
top: 2200px
top: 2300px
top: 2400px
top: 2500px
top: 2600px
top: 2700px
top: 2800px
top: 2900px

Hey! You're not on a mobile!

This 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!

Demo time! Try scrolling down the page to see how often scroll events fire!

(scroll right down to the bottom for the analysis!)


Please note, mobile devices have been updated significantly since this article was written. If they work for you, then great. Welcome to the future!

The Problem: Mobile browsers only fire scroll events at the end of a scroll.

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.

Use touch events? We're still screwed.

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!

Parallax you say?

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.

Andy Shora: UI Designer, 3D Illustrator, DataViz Developer