Scroll-snapping with CSS!

I always thought this was done with JavaScript, but it's actually possible with CSS!

Posted on Friday, 31 May 2019

CSS scroll-snapping allows for controlled scrolling experiences. If a user scrolls partially down/across an element, the CSS can force the scroll to snap to the top of the element instead.. or something.

I haven’t given this a go, because I only just found out 🤯

Browser compatibility

Fully-fledged in Safari and Chrome support this feature in it’s latest builds. Firefox supports properties from an older specification. IE and Edge have partial support, hidden behind a feature flag etc etc surprise surprise.

Read more about scroll-snap-type browser compatibility.


Update

I gave this a go with a real classy Father’s Day e-card.

It’s quite fun, but also didn’t work at all on my dad’s old old iPhone. Carefully with compatibility!

This kind of CSS black magic can also be very frustrating to the user, even I got a little bit annoyed when I was building with it 🙄


Source: MDN docs: scroll-snap-type