= CSS scroll snapping
{c}
<CSS scroll snapping> adjusts a <CSS scroll container>'s <CSS scroll position> to an eligible alignment of content. A target supplies a <CSS scroll snap area>; the container supplies a <CSS snapport>, derived from its <CSS scrollport> and adjusted by `scroll-padding`. Aligning these regions defines candidate snap positions.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§3, Scroll Snap Model; §4.2, snapport; §§5.1–5.2, snap area and alignment]{ref}
For an own geometrical example, arrange three consecutive panels, each $200$ <CSS pixels> wide, in a horizontal strip. Give the container a $200$-pixel scrollport, left-to-right coordinates, no gaps, no scroll padding or scroll margins, and no transforms. Aligning each panel's left edge with the viewing region's left edge gives candidate horizontal offsets
$$
0,\quad200,\quad400.
$$
At offset $200$, the second panel occupies the view. At offset $175$, its left edge is still $25$ pixels inside the view.
The container can request `overflow-x: auto; scroll-snap-type: x mandatory;`, while each panel requests `scroll-snap-align: start;`. The declarations specify the snapping axis, strictness and target alignment; the example separately stipulates the panel layout. These declarations alone do not arrange three arbitrary elements into a strip.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§4.1, scroll-snap-type; §5.2, scroll-snap-align]{ref}
With `mandatory`, a container with a valid snap position must be snapped when scrolling has settled. With `proximity`, whether it snaps at the end of an operation is left to the user agent under the specified rules. Neither keyword prescribes a universal numerical distance threshold or a particular animation.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§4.1.2, strictness; §§3 and 6, snapping mechanics]{ref}
The candidate geometry also does not uniquely determine which target an input gesture selects. Direction, intended endpoint and the user agent's selection behavior matter. Targets larger than the scrollport have special rules permitting access within the oversized region, so mandatory snapping is not a requirement to hide the middle of every large item.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.2.2, oversized snapping boxes; §6.2, choosing snap positions]{ref} Useful snapping combines predictable content alignment with access to the content between those alignments.
Back to article page
