Interactions like "a card snaps into place when you swipe to it" used to require JavaScript that listened to scroll events and computed positions by hand. CSS Scroll Snap turns this into a pure CSS solution — better performance, with native support for touch swipes.
The Three Basic scroll-snap Properties
Property
Applies to
Description
scroll-snap-type
Scroll container
Enables snapping; sets the axis and how forcefully it snaps
scroll-snap-align
Child items
Which edge of the container the item aligns to
scroll-snap-stop
Child items
Whether each stop must land on exactly one item, preventing fast swipes from skipping over
.container {
overflow-x: auto;
scroll-snap-type: x mandatory; /* x axis; mandatory snaps forcefully */
}
.item {
scroll-snap-align: center;
}
The second argument of scroll-snap-type sets how forcefully it snaps: with mandatory, scrolling always settles on the nearest snap point; with proximity, it only snaps when you stop close enough to a snap point, otherwise it stays where it is — a freer feel.
Horizontal Card Gallery Example
scroll-snap-type: x mandatory (swipe horizontally)
1
2
3
4
Combined with the horizontal layout from 6.3 Flexbox in Depth, this is the lightest way to build a mobile "card carousel" — no JavaScript carousel library needed.
Full-Screen Scrolling Example
html {
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: start;
}
This is the core CSS for a pure-CSS full-screen "page transition" landing page: every section fills one viewport, and scrolling snaps each one to the top.
scroll-behavior: Smooth Scrolling
Clicking an anchor link or calling scrollIntoView() jumps instantly by default. scroll-behavior: smooth turns this into a smooth animation — again, no JavaScript needed.
html {
scroll-behavior: smooth;
}
scroll-margin and Anchor Offsets
When the page has a fixed top navbar, jumping to an anchor hides part of the target behind the navbar. scroll-margin-top reserves that offset for anchor scrolling without affecting the element's own layout.
Setting scroll-snap-type but forgetting that the container needs overflow: auto/scroll to actually produce a scrollable area.
In full-screen scrolling, child heights that are not 100vh, or existing margins, cause slight misalignment of the snap positions.
Focusing only on scroll-behavior: smooth while ignoring the motion sickness it can cause for assistive-technology users; consider disabling smooth scrolling with the prefers-reduced-motion media feature (see 5.2 Common Media Features).