 CSS scroll position

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.