Scroll Snap in CSS | Miriam Eric Suzanne

When we’re scrolling down a page, or through a gallery of images, snap-targets can help guide us from one section or image to the next. In the past, developers have used JavaScript to hijack scrolling, but now we can manage scroll alignment directly in CSS with only a few lines of code.

Part of a series tagged 'mozilla developer'

Styling Lists in CSS – October 1, 2019
Why is CSS so Weird? – October 3, 2019
What does <code>revert</code> do in CSS? – October 9, 2019
Faster Layouts with CSS Grid – October 14, 2019
Subgrid for Better Card Layouts – October 15, 2019
Laying out Forms using Subgrid – October 16, 2019
Why isn’t this CSS doing anything? – October 21, 2019
Inner & Outer Values of the Display Property – October 28, 2019
Scroll Snap in CSS – October 31, 2019
How do you wrap long words in CSS? – November 6, 2019
Use new selectors responsibly with selector queries – November 20, 2019

The fallback even works well in old browsers!

See the Pen Image Gallery Demo by @miriamsuzanne on CodePen.

See the Pen Page Sections Demo by @miriamsuzanne on CodePen.

More about Scroll-Snap on MDN »