CSS Scroll Anchoring

Advanced

CSS Scroll Anchoring aims to keep a user's view stable when layout changes move content above the visible region of a scrolling box. The mechanism selects an anchor node and adjusts the scroll position when that node moves. It is a scroll-stability mechanism, not a replacement for reserving space for asynchronously loaded content.

What scroll anchoring protects

If content above a user's visible reading position changes size, the document can move underneath the user. Scroll anchoring attempts to compensate by tracking a suitable descendant as an anchor and adjusting the scroll offset when that anchor moves.

?

Anchor-node selection

The specification describes an anchor node as a descendant of a scrolling box. Candidate selection considers visibility, document position, excluded subtrees, and priority candidates. Suitable candidates are examined according to the specification's algorithm; this does not simply mean the first visible element.

A scrolling box that is not scrolled away from its origin in its block flow direction does not select an anchor. Nodes can also be excluded, including elements whose computed overflow-anchor is none and several positioning/display cases defined by the draft.

?

Scroll adjustment and suppression

When the selected anchor moves, the specification computes the change in its block-start offset relative to the scrolling content and queues a corresponding scroll adjustment. The adjustment occurs at the end of a suppression window unless a suppression trigger prevents it.

The current draft lists suppression triggers including relevant changes to top, left, right, bottom, margin, padding, width, height, position, and transform, certain changes to absolute positioning, and a zero scroll offset. These rules mean authors should not assume that every layout change will be compensated.

?

Opt out with overflow-anchor

The current draft defines overflow-anchor with auto and none. auto leaves an element potentially eligible for anchor selection. none excludes the element and relevant descendants from anchor selection for scrolling boxes created by the element or an ancestor, subject to the draft's nested-scroller rule.

?

Do not confuse anchoring with scroll snapping

Scroll anchoring and Scroll Snap solve different problems. Scroll Snap defines snap positions and re-snapping behavior. Scroll Anchoring responds to layout changes that would otherwise move the user's view. The current Scroll Anchoring draft explicitly limits anchoring adjustments when a scrolling box is snapped, so the mechanisms can interact without becoming the same feature.

CSS Overflow owns overflow and scroll-container formation. Scroll Anchoring does not create a scrolling mechanism, and overflow-anchor does not replace layout techniques that reserve space for content whose dimensions are known in advance.

Summary