 CSS scroll snap area

A CSS scroll snap area is the target region aligned within a CSS snapport during CSS scroll snapping. The specification constructs it from the target's transformed CSS border box: find its rectangular bounding box, aligned to the scroll container's coordinate axes, then apply the outsets supplied by CSS scroll margin.^[ref]

Consider an untransformed element whose border box occupiesin content coordinates measured in CSS pixels. Set scroll-margin: 10px 20px 30px 40px;, in top/right/bottom/left order. The snap area becomesIt is $160$ pixels wide and $80$ high, even though the original border box remains $100$ by $40$.

For a candidate start alignment, suppose the CSS snapport begins at viewport coordinates $(40,10)$ and is large enough to contain this area. Use a horizontal left-to-right writing mode and assume adequate reachable scroll ranges. The required offsets satisfygiving $(s_x,s_y)=(420,80)$. At that position, the element's actual border box appears at $[80,180]\times [20,60]$; the extra room comes from aligning the larger snap area, not moving its borders relative to its content.^[ref]

A CSS transform can change the initial bounding rectangle. The snap area is nevertheless axis-aligned in the scroll container's coordinate space, even if the transformed border is rotated. Its rectangular shape is therefore an alignment construction, not necessarily the painted outline of the element.

CSS scroll margin also differs from an ordinary layout margin: the example's outsets enlarge the snapping region without assigning extra space between neighboring boxes in normal layout. Reachability and visibility still constrain valid snap positions. If an exact alignment would require scrolling beyond the available area, the specification uses the reachable position as far toward that alignment as possible.^[ref]