overflow-anchor
Content above that stops pushing you down
Live demo
scroll here
and this line holds still
while the box above resizes
filler
filler
scroll here
and this line is shoved
every time the box grows
filler
filler
Caveat and fallback
CaveatScroll anchoring is already on, and it only engages once the container has actually been scrolled, so a box that grows while you sit at the very top still shoves everything down. The browser picks the anchor node itself and drops it when the DOM around it changes too much, which is why an infinite list that replaces its rows wholesale gets no help from it.
FallbackAn engine without scroll anchoring pushes the content down the way every browser used to, which is precisely the behaviour being avoided here, so never build a layout that only reads correctly while the anchor holds. Reserve the height of anything that loads late instead, and let anchoring cover what is left.
Source code
<div class="feed"><img src="late.jpg"></div>
/* on by default: this is how you lose it */
.feed { overflow-anchor: none; }
/* and how you keep one node out of it */
.ticker { overflow-anchor: none; }Published
Questions
Why does the page jump when an image loads above what I am reading?
Because the image had no reserved height, so laying it out pushes everything below it down. Scroll anchoring is the browser's attempt to compensate by adjusting the scroll offset, but the real fix is giving the image width and height attributes or an aspect-ratio so nothing has to move.
What does overflow-anchor: none do?
It switches scroll anchoring off for a scroll container and everything inside it, so growth above the reading position shoves the content down again. It is worth reaching for only when the browser keeps choosing an anchor you do not want, such as inside a ticker that rewrites itself.
Why is scroll anchoring not helping my infinite list?
The browser picks one node as the anchor and abandons it when the DOM around it changes too much. A list that replaces its rows wholesale on every page rather than appending to them destroys the anchor each time, so append where you can and reserve the height of what has not arrived.