= CSS scroll position
{c}
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.<CSS Overflow Module Level 3 by World Wide Web Consortium>[§2.3, scroll position, offset, origin and initial position]{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 coordinates
$$
(160,80)-(120,40)=(40,40).
$$
Advancing 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 satisfy
$$
0\leq s_x\leq500-200=300,\qquad
0\leq s_y\leq300-100=200.
$$
These 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.<CSSOM View Module by World Wide Web Consortium>[§6, Element scrolling members: scrollTop, scrollLeft and scroll an element]{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.
Back to article page
