How to Use CSS Scroll Snap (2026)
CSS Scroll Snap creates controlled scrolling experiences where the viewport locks to defined snap points. Carousels, full-page sections, image galleries, and horizontal card lists all benefit from snap behavior. The best part: it is pure CSS with no JavaScript required, giving you native-feeling scroll physics on every platform.
- Build smooth scroll-snapping layouts with CSS.
- Covers scroll snap basics.
- Covers mandatory vs proximity snap.
- Covers snap alignment options.
- Covers real-world scroll snap patterns.
Scroll Snap Basics
Scroll snap requires two CSS properties. The container gets scroll-snap-type to enable snapping and define the axis. Each child gets scroll-snap-align to define where it snaps. That is the entire API — two properties for professional scrolling behavior.
The container also needs overflow set to auto or scroll on the snap axis. For horizontal scrolling, you need overflow-x: auto. For vertical, overflow-y: auto. Without overflow, scroll snap has nothing to snap.
scroll-padding adds offset from the container edge where snap points align. This is essential when you have a fixed header — set scroll-padding-top to your header height so snapped content does not hide behind it.
Mandatory vs Proximity Snap
mandatory forces the scroll to always land on a snap point. The browser will not let the scroll position rest between snap points. This is ideal for carousels, image galleries, and full-page sections where every item should be fully visible.
-webkit-backdrop-filter alongside backdrop-filter for Safari support. Without the prefix, the effect is invisible to roughly 25% of mobile users.proximity only snaps when the scroll position is near a snap point. If the user scrolls past the "snap zone," they can rest between items. This feels more natural for content-heavy pages where users might want to read content that spans between snap points.
Start with mandatory for discrete items (cards, slides, sections) and proximity for continuous content (long text, feeds, timelines). If mandatory feels too aggressive, switch to proximity.
Snap Alignment Options
scroll-snap-align: start snaps the leading edge of the child to the leading edge of the container. This is the most common alignment for horizontal carousels — each card aligns to the left edge.
backdrop-filter inside a position: fixed element can cause severe scroll performance issues. Test thoroughly on real iOS devices.scroll-snap-align: center snaps the center of the child to the center of the container. Perfect for hero sections and featured content where you want the active item centered in the viewport.
scroll-snap-align: end snaps the trailing edge. Less common but useful for right-to-left layouts or bottom-aligned vertical scroll experiences.
Real-World Scroll Snap Patterns
Horizontal card carousel: a flex container with overflow-x: auto, scroll-snap-type: x mandatory, and children with scroll-snap-align: start and flex-shrink: 0. Set child width to about 80% for a peek at the next card.
Full-page sections: a container with height: 100vh, overflow-y: auto, scroll-snap-type: y mandatory. Each section is also height: 100vh with scroll-snap-align: start. Instant full-page scrolling.
Image gallery: combine horizontal scroll snap with object-fit: cover on images for a swipeable gallery that maintains aspect ratios while snapping cleanly to each image.