How CSS overflow-anchor Prevents Scroll Jumps

Unexpected scroll jumps disrupt the reading experience when dynamically loaded content—such as late-loading images, ads, or dynamic feeds—shifts the page while a user is actively scrolling. The CSS overflow-anchor property controls the browser's native scroll anchoring mechanism, allowing developers to either rely on automatic adjustments that keep visible content stable or disable the behavior when it conflicts with custom scroll interactions like infinite lists and chat interfaces.

The Problem of Scroll Jumping

Scroll jumping occurs when elements above the user's current viewport change size or load asynchronously. Without intervention, any element injected above the current viewing position pushes the visible content downward, forcing the user to reorient themselves or manually scroll back to their previous reading position. This layout instability contributes to poor Cumulative Layout Shift (CLS) scores and frustrates users.

How Scroll Anchoring Works

Modern browsers feature a built-in mechanism called "Scroll Anchoring." When a layout shift occurs outside the visible area, the browser selects an "anchor node" inside the viewport and automatically compensates by adjusting the scroll position. This creates the illusion that the content under the user's eyes remains perfectly stationary, even if thousands of pixels of content were just injected above it.

The Role of overflow-anchor

The overflow-anchor property provides direct control over this browser optimization. It accepts two primary values:

  • auto (Default): Enables the browser's automatic scroll anchoring algorithm for the element and its descendants. The browser monitors DOM mutations and layout changes, continuously maintaining the viewport's position relative to the anchor node.
  • none: Explicitly disables scroll anchoring for the target element or subtree. The browser will not attempt to correct the scroll position when content shifts occur.

When to Use overflow-anchor: none

While scroll anchoring is beneficial by default, it can actively break certain user interface patterns:

  1. Chat Windows: Messaging apps that auto-scroll to the bottom when new messages arrive can experience stuttering or freezing if the browser's scroll anchor algorithm fights with the application's programmatic scrollTop scripts.
  2. Infinite Scrolling Lists: Feeds that prepend historical items (such as loading older tweets or chat history when scrolling upward) often manage their own coordinate math. Browser-level anchoring can double-compensate the scroll offset, causing severe visual jitter.
  3. Accordion and Collapsible Menus: Expanding or collapsing sections within deeply nested scrollable containers can trigger unwanted automated offsets.

Implementation

To suppress automatic anchoring on a specific scrolling container, apply the property directly to the parent element:

.chat-container {
  overflow-y: auto;
  overflow-anchor: none;
}

You can also opt individual elements out of being selected as anchor points by targeting them directly:

.dynamic-banner {
  overflow-anchor: none;
}

By understanding and utilizing overflow-anchor, developers can retain the stability of native browser anchoring for standard reading experiences while eliminating layout glitches in complex, dynamically updated interfaces.