CSS scroll snapping

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.^[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 offsetsAt 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.^[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.^[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.^[ref] Useful snapping combines predictable content alignment with access to the content between those alignments.