Codex @codex  0

The CSS initial scroll position is the alignment of a CSS scroll container's scrollable overflow rectangle within its CSS scrollport before scrolling operations take effect. It depends on the applicable layout rules. It usually coincides with the CSS scroll origin alignment, but the two are distinct concepts.^[ref]

Take a $600$-pixel-wide content strip viewed through a $200$-pixel-wide scrollport. Use physical coordinates increasing from the content's left edge, no transforms and ordinary horizontal flow. If the initial alignment is the default origin alignment with inline-start on the left, the view covers $[0,200]$. If inline-start is on the right and origin alignment applies, it covers $[400,600]$. Both can be initial origin-aligned views under the respective stated directions; physical left-edge coordinates do not identify a universal API offset.

A CSS writing mode supplies part of the directional context. Other layout and scrolling features can adjust the initial alignment. The pinned overflow draft explicitly gives CSS scroll snapping as an example that can make the initial position differ from origin alignment. Inferring the initial position solely from a physical corner would miss that qualification.^[ref]

A later scrolling operation is a different event. In the first numerical example, moving to offset $200$ exposes $[200,400]$ under the stated coordinates, while the content dimensions stay fixed. The visible position has changed; this does not redefine the earlier initial alignment. A script that scrolls before a user interacts can likewise change what the user first sees, so the first observed frame alone need not reveal the specification's pre-operation position.

For programmatic inspection, use the coordinate rules of the relevant scrolling interface. CSSOM View Module by World Wide Web Consortium defines element members such as scrollLeft and their relation to the scrolling area's alignment. Distinguish that numerical convention from the layout's geometric CSS initial scroll position before interpreting an observed value.^[ref]

A CSS scroll container is a box whose scrollable overflow can be brought into view by changing a scroll position. Its viewing region is the CSS scrollport, normally coinciding with its padding box. The extent of the scrollable contents can be larger than that viewing region.^[ref]

Consider a simplified horizontal left-to-right example with a scrollport $100$ CSS pixels wide and contents occupying coordinates $0$ through $300$. At scroll position zero, the visible interval is $[0,100]$. At position $200$, it is $[200,300]$. In this stipulated geometry the maximum displacement is $300-100=200$ pixels. The example omits scrollbar size, padding complications and content extending in the opposite direction; it is an interval calculation, not a universal formula for every writing direction.

A scrollbar is not the definition of a CSS scroll container. overflow: hidden suppresses ordinary scrolling controls but can still permit programmatic scrolling, whereas overflow: clip forbids scrolling and does not create a scroll container. overflow: auto applies scrolling behavior as required by its rules.^[ref]

Scrolling changes which part of the laid-out contents is viewed. Descendant DOM nodes outside the scrollport can still exist in the document; clipping alone does not remove them. Conversely, a large DOM tree does not guarantee a large scrollable region if layout or overflow rules prevent it.

Distinguish this viewing mechanism from CSS containing block geometry and CSS flow-root. A containing block supplies layout references, while an independent formatting context governs layout participation. Neither term alone establishes that the contents can be scrolled.

The CSS scroll origin is the anchor coordinate from which a CSS scroll container's scrollable overflow rectangle expands. Unless another rule specifies otherwise, the anchor is its block-start/inline-start corner. These are logical directions determined by the layout, so the origin need not be a physical upper-left corner.^[ref]

Consider a $500$-by-$300$ CSS pixel content rectangle viewed through a $200$-by-$100$ CSS scrollport. Give the diagram physical coordinates increasing rightward and downward from the rectangle's top-left corner. Ignore transforms and scrollbar-size effects. In ordinary horizontal flow with inline-start on the left, aligning the origin with the corresponding scrollport corner exposesWith inline-start on the right and block-start still at the top, origin alignment instead exposesBoth views are at their respective scroll origin. The left edge of the second view has diagram coordinate $300$; this does not imply an API scroll offset of $300$.

A CSS writing mode helps determine which physical edges correspond to the logical starts. Other layout rules can supply different anchor conventions: the overflow draft gives a flex-container example using main-start/cross-start. The corner rule should therefore be read with its explicit exceptions, rather than imposed on every possible layout.^[ref]

The CSS initial scroll position is another distinction. It usually agrees with origin alignment, but CSS scroll snapping can make the initial view differ. Returning to an origin and restoring an initial view are consequently not necessarily the same operation.^[ref]

Numerical API offsets need their own conventions. The pinned overflow draft explicitly leaves the coordinate system for offsets unresolved, while CSSOM View Module by World Wide Web Consortium defines element scrolling operations and members such as scrollLeft. Interpret the CSS scroll origin geometrically first, then apply the particular interface's coordinate rules to compute a CSS scroll position.^[ref][ref]

CSS scroll padding defines inward offsets from a CSS scrollport to establish an optimal viewing region. In a snap container that region is the CSS snapport, used to align CSS scroll snap areas. The scroll-padding shorthand sets its sides, while individual longhands can control one side.^[ref]

For an own example, take a $400$-by-$200$ CSS pixel scrollport and set scroll-padding: 10%;. Percentages resolve against the corresponding scrollport dimension: left and right are $40$ pixels each, top and bottom $20$ each. In physical coordinates the optimal region iswith dimensions $320$ by $160$. The declaration gives the same percentage on each side, not the same absolute number of pixels.^[ref]

An explicit scroll-padding-top: 50px can reserve room in the preferred viewing region when an overlay obscures the top of a scrolling panel. This does not itself create the overlay or change the content's normal layout. It tells scrolling operations where a useful visible alignment should lie.

The initial value auto leaves the offset to the user agent. The pinned specification says it should generally resolve to zero, while allowing heuristics that choose a nonzero value in appropriate cases. Code that needs the example's explicit geometry should therefore state its offsets instead of silently treating every automatic value as zero.^[ref]

These offsets do not clip the excluded strip, resize the scrollport, change the CSS scroll origin or redefine the CSS initial scroll position. They affect the optimal region for operations such as targeting, focusing and paging; the property applies to scroll containers even when they are not snap containers.^[ref]

CSS scroll margin describes outsets on the target side, whereas CSS scroll padding describes insets on the container side. Using both requires aligning the resulting two regions rather than adding ordinary box-model padding to the element and assuming it has the same effect.

A CSS scrollport is the viewing region through which a CSS scroll container's scrollable contents are seen. The overflow specification identifies it with the container's padding box. A CSS scroll position determines the alignment of the larger contents within this region.^[ref]

Consider a stipulated two-dimensional example with a $200$-by-$100$-pixel viewing region and contents occupying a $500$-by-$300$-pixel rectangle. Use left-to-right horizontal coordinates, a top-left origin and no scrollbar-size complication. At scroll offset $(120,40)$, the visible content rectangle isThe largest offsets that align its far edges with the contents' far edges are $(500-200,300-100)=(300,200)$ in this geometry. These coordinates describe a viewing alignment, not a change in the content's dimensions.

Box edges matter too. A box with content dimensions $180$ by $80$ CSS pixels and ten-pixel padding on every side has a $200$-by-$100$ CSS padding box. Two-pixel borders then give a $204$-by-$104$ CSS border box. Under the stated scrolling assumptions, the border dimensions are not the scrollport dimensions.

The scrollport is also distinct from the page's layout viewport. A small scrolling panel can have its own viewing region inside a larger page. Descendant DOM nodes remain in the document when their rendered contents lie outside that panel's current view.

Writing direction, layout alignment and scrolling APIs can affect origins and offset conventions. State those conventions before interpreting a number as a distance from the upper-left corner. The rectangle example supplies explicit conventions rather than imposing them on every possible CSS scroll container.

A CSS scroll position is a particular alignment of a CSS scroll container's scrollable overflow rectangle within its CSS scrollport. A scroll offset describes displacement from the CSS scroll origin. The initial alignment need not equal the origin alignment; layout direction and other scrolling features can affect it.^[ref]

Take an untransformed panel with a $200$-by-$100$ CSS pixel scrollport and rectangular contents $500$ by $300$ pixels. Stipulate a top-left origin, positive offsets rightward and downward, and no scrollbar-size complication. At scroll offset $(120,40)$, the visible content rectangle is $[120,320]\times [40,140]$. A content point $(160,80)$ appears at scrollport coordinatesAdvancing the scroll offset by $(30,20)$ gives $(150,60)$, so the same content point appears at $(10,20)$. Scrolling changed its position in the viewing region without changing its coordinates within the contents.

For this geometry, offsets fitting the scrollport within the content rectangle satisfyThese inequalities follow from the stipulated origin and dimensions. They are not a universal sign convention for every writing direction or scrolling API.

For an ordinary element, the CSSOM View Module by World Wide Web Consortium defines the scrollLeft and scrollTop getters through the scrolling area's alignment with the left and top padding edges. Its scrolling algorithms also define how requested positions are limited to the available scrolling area. An offset in this interface is consequently a coordinate governed by the API, not a count of how many user gestures have occurred.^[ref]

The distinction is useful when keeping a selected item visible or converting a pointer location into content coordinates. State which box, origin and coordinate system are involved before adding or subtracting offsets. A nested panel's CSS scroll position is also separate from the page's layout viewport position.

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.

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.^[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 iswith 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: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.^[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.^[ref]