Scroll Anchoring
Scroll anchoring keeps the visible content stationary when content above the viewport changes size, by selecting an anchor node and compensating scroll position on layout shifts.
Definition
Scroll anchoring is a browser feature that suppresses visible jumps when content changes above the current scroll position. The engine picks an anchor element near the top of the viewport and adjusts scrollTop when layout above it grows or shrinks. The overflow-anchor property lets developers exclude elements from anchor selection.
Context and scope
Protects reading flows against late-loading images and injected banners. Also the mechanism that breaks infinite scroll implementations that expect exact scrollTop math.
Common misconceptions
- Scroll anchoring changes scroll behavior for scripts — it compensates after layout, and scrollTop reads reflect compensated values
- It eliminates layout shift entirely — it compensates for shifts above the anchor; shifts inside the viewport still show
- Disabling it globally is the fix for jumpiness — usually the real fix is reserving space for late content
Anti-patterns
- Prepending list items and fighting the anchor with manual scrollTo corrections that double-adjust
- Setting overflow-anchor: none across the app to silence one buggy widget instead of scoping the exclusion
- Building precise scroll-restoration math on top of an engine that may compensate position asynchronously
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
What it is
Without anchoring, inserting a banner above the viewport pushes everything down and the reading position jumps. With anchoring, the browser holds a chosen node visually fixed by shifting scrollTop oppositely. The user keeps their place; the layout change happened above, invisibly.
How it works
The engine selects an anchor from elements near the viewport top, preferring those with dominant visual weight. On layout changes, it computes the delta and adjusts the scroll position. overflow-anchor: none on an element excludes it from being chosen, and on a container disables the feature for its subtree.
When to care
Long articles with lazy media, chat logs prepending history, feeds inserting ads. Infinite scroll implementations that rely on unmodified scrollTop arithmetic must account for compensation or disable anchoring locally on the scroll container.
Pitfalls
Anchoring works above the viewport: shifts inside it still move content and count toward layout shift metrics. Programmatic scrollTo interleaves with compensation and can land somewhere unexpected in the same frame. Excluding anchors on every animated header recreates the jump problem anchoring solved.