= CSS snapport
{c}
The <CSS snapport> is the alignment-container region used when <CSS scroll snapping> aligns a target's <CSS scroll snap area>. It is derived from the <CSS scrollport> by the inward offsets specified through <CSS scroll padding>. This lets snapping use a preferred viewing region rather than always aligning to the scrollport's outer edges.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§3, snap model; §4.2, Scroll Snapport: scroll-padding]{ref}
For an own two-dimensional example, take a $300$-by-$200$ <CSS pixel> scrollport, with physical coordinates increasing rightward and downward. Declare `scroll-padding: 10px 20px 30px 40px;`, in top/right/bottom/left order. The snapport is
$$
[40,280]\times[10,170],
$$
with width $300-40-20=240$ and height $200-10-30=160$. The scrollport itself remains $300$ by $200$.
Suppose a target's snap area begins at content coordinate $x=500$ and is $100$ pixels wide, with no scroll margin. Assume horizontal left-to-right layout, no transforms and an adequate reachable scrolling range. For start alignment, its displayed left edge must equal the snapport's left edge:
$$
500-s_x=40,\qquad s_x=460.
$$
With zero left scroll padding, the same candidate would instead have $s_x=500$. The inset changes the alignment target without changing the element's position in its content layout.
An inset can accommodate a toolbar obscuring part of the viewing region, or provide space around a focused target. It does not itself clip the excluded region, change the <CSS scroll origin> or resize the content. Ordinary box padding and <CSS scroll padding> consequently have different effects.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§4.2, optimal viewing region and no effect on layout, origin or actual visibility]{ref}
The alignment must also be interpreted with the appropriate <CSS writing mode> and reachable offsets. Start, end and center are alignments between the <CSS scroll snap area> and the <CSS snapport>, while selection among candidates belongs to the snapping rules. The numerical example solves one candidate; it does not predict which gesture will select it or prescribe an animation.<CSS Scroll Snap Module Level 1 by World Wide Web Consortium>[§5.2, alignment; §5.2.3, unreachable positions; §6.2, selection]{ref}
Back to article page
