CSS overflow-anchor Property

The CSS overflow-anchor property controls whether the browser's scroll anchoring feature applies to an element. Scroll anchoring keeps your reading position stable when content above the viewport changes size, so the page doesn't jump under you. The overflow-anchor property lets you opt out of that behavior when it gets in the way.

This page covers what scroll anchoring solves, the two values of overflow-anchor, when to disable it, and the browser support you can rely on.

What scroll anchoring solves

Imagine you're reading an article and an ad, image, or lazily-loaded comment suddenly loads above your current scroll position. Without scroll anchoring, that newly inserted content pushes everything down and the text you were reading jumps away. It's one of the most jarring experiences on the web.

Scroll anchoring fixes this by picking a DOM element near the top of the viewport as an anchor, then adjusting the scroll offset after a layout change so that anchor element stays visually fixed. You keep reading the same line; the inserted content expands silently above. Modern browsers enable this by default — you usually don't think about it because it just works.

overflow-anchor is your escape hatch. It does not turn scroll anchoring on (it's already on); it only lets you turn it off for a subtree where the automatic adjustment causes problems.

Property values

overflow-anchor takes two real values plus the CSS-wide keywords:

Note that overflow-anchor is not inherited by default, but setting it to none on an ancestor effectively suppresses anchoring for that whole subtree.

Syntax

overflow-anchor: auto | none | initial | inherit;

To disable scroll anchoring for an entire document, apply none to the root:

body {
  overflow-anchor: none;
}

More commonly you scope it to just the container that misbehaves:

.live-feed {
  overflow-anchor: none;
}

When to disable anchoring

Most of the time you should leave anchoring on — disabling it brings back the content-jump problem it was designed to prevent. Reach for overflow-anchor: none only in specific cases:

• Infinite scroll that prepends items. A chat window or "load older messages" feed that inserts content at the top sometimes fights with anchoring. If you're manually managing the scroll position with JavaScript, anchoring's automatic adjustment can double-correct and cause a stutter.
• Custom scroll-tracking animations. If you read scrollTop on every frame to drive a parallax or progress effect, an anchoring adjustment can introduce an offset you didn't expect.
• Sticky "stay at bottom" logs. A terminal-style log that should always show the newest line at the bottom may be easier to manage without anchoring interfering.

In each of these cases, test with anchoring on first — you may not need to disable it at all.

Set it from JavaScript

You can toggle anchoring at runtime through the DOM:

// Disable scroll anchoring on the feed container
const feed = document.querySelector(".live-feed");
feed.style.overflowAnchor = "none";

// Re-enable it later
feed.style.overflowAnchor = "auto";

Browser support and graceful degradation

overflow-anchor (and scroll anchoring itself) is supported in Chrome, Edge, Firefox, and other Chromium-based browsers. Safari has historically not implemented scroll anchoring, so the property has no effect there — pages simply behave as if anchoring were off.

Because the property only ever removes a nice-to-have behavior, there's nothing to polyfill and no fallback to write: in unsupported browsers overflow-anchor: none is harmless and ignored.

Related properties

• overflow — the shorthand that decides whether overflowing content is clipped, scrolled, or visible.
• overflow-x and overflow-y — control overflow on each axis independently.
• scroll-behavior — make scrolling (e.g. to anchors) animate smoothly instead of jumping.
• position — pairs with sticky/fixed layouts that often coexist with scrollable regions.

Practice