Scroll anchoring attempts to preserve the reader's position when content above the viewport changes size. The overflow-anchor property can exclude an element or subtree from consideration. It does not implement a chat application's explicit stick-to-bottom policy.
Make this comfortable
CSS overflow-anchor: exclude a volatile child, not the whole feed
When to use it
An audit activity feed receives older entries above the current reading position while a small loading indicator at the top changes height. Leave anchoring available on the feed, but exclude the volatile indicator as an anchor candidate. Give the feed a bounded scroll area and keep each record in source order. Test a reader midway through a long feed while older entries arrive, a reader at the bottom while new entries arrive, images that finish loading above the viewport, and keyboard scrolling. The behavior of automatic anchoring is browser-controlled and can be suppressed by certain layout changes; do not promise an exact pixel location after every update. If the product needs to follow new messages only while the reader is already near the bottom, application code must measure that state and perform the scroll deliberately. The CSS rule should never hide an entry or move focus.
.activity-feed { max-block-size: 34rem; overflow-y: auto; }
.activity-feed__loading { overflow-anchor: none; min-block-size: 2rem; }Cost and verification
The property has little direct rendering cost. The dominant cost in a live feed is the number of records, images, and layout updates. Reserve media dimensions and avoid replacing entire record trees on each poll; either can create jumps that a single exclusion cannot repair. An opt-out applied to the feed itself disables anchoring for all descendants, and a descendant cannot opt back in under that excluded subtree. Compare behavior on supported browsers with the rule removed before deciding it improves reading position. Do not use a screenshot of a static feed as proof: the failure appears only while content is inserted or resized above a scrolled reader.
Common Mistakes
- Do not disable anchoring on the entire feed by default.
- Do not treat overflow-anchor as a stick-to-bottom API.
- Do not ignore image dimensions and repeated DOM replacement.
Connected lessons
css
reference
web