CSS initial scroll position (source code)

= CSS initial scroll position
{c}

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.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§2.3, initial scroll position, scroll origin and their relationship]{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.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§2.3, writing-mode dependence and scroll-snapping example]{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.<CSSOM View Module by World Wide Web Consortium>[§6, Element scrolling members, scrollLeft and scrollTop]{ref}