Scroll snap
Scrolling behavior where the viewport rests on specific positions instead of stopping anywhere the user releases.
A
B
C
D
E
scroll-snap-type: x mandatory
Scroll snap makes a scrollable area feel like a paged view. The CSS `scroll-snap-type` property tells the browser to snap to the nearest defined snap point when the user stops scrolling. It powers most modern carousels, story-style feeds, paged horizontal galleries, and section-by-section landing pages. The user still gets free scrolling momentum; the browser just rounds to the nearest snap point at rest. Native support is now widespread (CSS scroll-snap is Baseline).
Also called
snap scrollingsnap pointspaged scroll
When to use
- Horizontal image galleries and story rings
- Carousels with discrete items
- Section-by-section paged landing pages
- Mobile UI where users expect snap behavior
When not to use
- Long continuous content like articles or documentation
- Lists where rough scroll position is fine
- Pages where snap behavior would fight reading flow
Related
Source
CSS Scroll Snap specification (W3C, level 1 is Baseline 'widely available'). Implemented in all modern browsers since 2018-2019.