31 Scroll Anchoring. 31 of 95.
31/SCROLL BEHAVIOR/31 of 95
Scroll Anchoring
The page protects the thing you were looking at.
The problem
Content inserted or resized above your reading position lurches the viewport, so you lose your place mid-sentence.
The solution
Scroll correction keeps the anchor fixed when content above is inserted or grows.
Experiment
Play with the values
200px
60px
0ms
How it works
- The element the user is looking at is chosen as the anchor.
- Its position in the viewport is recorded before anything above it changes size.
- When content is inserted or grows above that anchor, the document wants to push it down.
- The layout shift is measured as the difference between the old and new anchor positions.
- Scroll position is corrected by that difference so the thing in view stays put.
Seen in
Social feeds
New posts load above your reading position without shoving the current item off screen.
Chat threads
Incoming messages above the viewport don't jump you away from what you're reading.
Infinite scroll
Prepended content keeps your scroll anchor stable as older items load in.
Live updates
Real-time inserts above the fold preserve the element you were focused on.