06 / SCROLL BEHAVIOR
Scroll Anchoring
The problem
New content loads above what you are reading and the page lurches, losing your place mid-sentence.
The solution
Preserve the visible anchor element position.
Experiment
Task: Read the highlighted item, then insert content above.
Feed item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
anchorFeed item 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
anchorFeed item 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feed item 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Play with the values
How it works
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.