CSS overflow-anchor Property

This property provides a way to opt out of the browser's scroll anchoring behavior, which keeps a user's place when content loads in above their current view.

selector { overflow-anchor: auto | none; }
auto Enables the browser default scroll anchoring behavior to minimize layout shifts.
none Disables scroll anchoring for the element, allowing the scroll position to jump when content changes above.

Code Examples

A basic scroll container using the default auto behavior to ensure the user stays focused on the lower text even if height changes occur above.

<div style="overflow-y: scroll; overflow-anchor: auto; height: 200px; border: 2px solid #333333; padding: 10px;">
  <p>Scroll down and wait for the dynamic content to appear above.</p>
  <div id="spacer" style="height: 500px;"></div>
  <p>I am the anchor point. Even if stuff loads above, I should stay put.</p>
</div>

An advanced example of a chat window where overflow-anchor is set to none so that the developer can manually control the scroll position via JavaScript without interference.

<style>
  #chat-window {
    height: 300px;
    overflow-y: auto;
    overflow-anchor: none;
    border: 1px solid #000000;
    background: #f9f9f9;
  }
  .msg { padding: 5px; border-bottom: 1px solid #eeeeee; }
</style>

<div id="chat-window">
  <div class="msg">Welcome to the chat.</div>
</div>
<button onclick="addMessage()">Receive Message</button>

<script>
function addMessage() {
  const win = document.getElementById("chat-window");
  const msg = document.createElement("div");
  msg.className = "msg";
  msg.innerText = "New message at " + new Date().toLocaleTimeString();
  msg.style.color = "#007bff";
  win.appendChild(msg);
  // Since anchoring is none, we manually handle the view if needed
  win.scrollTop = win.scrollHeight;
}
</script>

Pro Tip

If you are prepending items to a list via JavaScript and you want to keep the user at the bottom (like a terminal), use "overflow-anchor: none" on the container. This prevents the browser from trying to anchor to old items and allows your custom "scrollTo" logic to work without fighting the engine.

Deep Dive

When content like images or ads load above the viewport, the page height changes. Without anchoring, the text you are reading would suddenly jump down the screen. Scroll anchoring is like a bookmark that stays pinned to the paragraph you are currently looking at. The browser selects an "anchor node" within the visible area and adjusts the scroll offset automatically whenever the layout shifts above it. By default, browsers have this turned on. You use this property on a scrolling container to tell the browser whether it should try to keep the user's place or just let the content move naturally.

Best Practices

Leave this property at its default "auto" value for most websites. It is a massive win for user experience because it prevents the "janky" feeling of pages jumping around. Only set it to "none" if you are building a specific type of interface, like a chat app or a real-time log, where you are already using JavaScript to precisely control the scroll position and the browser's native anchoring is interfering with your custom logic.

Common Pitfalls

The most common mistake is trying to use this on an element that isn't actually a scroll container. It only has an effect on elements where overflow is set to something other than "visible". Also, keep in mind that the browser's anchoring algorithm might give up if the anchor node moves off-screen or if there are complex transforms involved. It is not a 100% guarantee against layout shifts, but it handles the majority of them.

Accessibility

Scroll anchoring is a critical accessibility feature. For users with cognitive disabilities or those who use screen magnifiers, unexpected layout shifts can be extremely disorienting. Keeping the content stable ensures that the user does not lose their context or focus. Disabling it without a very good reason can make your site difficult to navigate for these users.

Dev Data Table: overflow-anchor property

default auto
animatable no
inherited no
experimental no
year_intro 2017
year_standard 2022
js_syntax_1 element.style.overflowAnchor = "none";
js_syntax_2 element.style.setProperty("overflow-anchor", "none");
js_note Changing this via JavaScript is useful when you want to temporarily disable anchoring during custom scroll animations or manual DOM manipulations.
browsers { "Chrome": 56, "Edge": 79, "Firefox": 66, "Safari": 15.4, "Opera": 43, "Chrome Android": 56, "Safari on iOS": 15.4, "Samsung Internet": 6, "Opera Mobile": 43 }
results render here...