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 🤯
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.
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