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]

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.