How to use CSS Scroll Snap

Avatar of Chris Coyier
Chris Coyier on

Grow sales with a smart marketing platform. Try Mailchimp today Mailchimp tracking pixel

Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is the edges of those children that matter, not some fixed snapping distance.

I like Max Kohler’s coverage as well, which includes a demo where the snapping can happen in multiple directions.

This is one of those things where, if you didn’t know about it, it’s worth a solid golf clap for CSS.

Direct Link →