= CSS scroll snap area
{c}
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>.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.1, scroll-margin and snap-area construction]{ref}
Consider an untransformed element whose border box occupies
$$
[500,600]\times[100,140]
$$
in content coordinates measured in <CSS pixels>. Set `scroll-margin: 10px 20px 30px 40px;`, in top/right/bottom/left order. The snap area becomes
$$
[500-40,600+20]\times[100-10,140+30]
=[460,620]\times[90,170].
$$
It 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 satisfy
$$
460-s_x=40,\qquad90-s_y=10,
$$
giving $(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.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.2, start alignment of snap area within snapport]{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.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.1, outsets; §§5.2.1 and 5.2.3, valid visibility and unreachable positions]{ref}
Back to article page
