CSS initial scroll position
ID: css-initial-scroll-position
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]
CSS Overflow Module Level 3 by World Wide Web Consortium. §2.3, initial scroll position, scroll origin and their relationship
Take a -pixel-wide content strip viewed through a -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 . If inline-start is on the right and origin alignment applies, it covers . 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]
CSS Overflow Module Level 3 by World Wide Web Consortium. §2.3, writing-mode dependence and scroll-snapping example
A later scrolling operation is a different event. In the first numerical example, moving to offset exposes 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]CSSOM View Module by World Wide Web Consortium. §6, Element scrolling members, scrollLeft and scrollTop
New to topics? Read the docs here!