overflow-anchor

The overflow-anchor property enables us to opt out of Scroll Anchoring, which is a browser feature intended to allow content to load above the user's current DOM location without changing the user's location once that content has been fully loaded.

Why We Need It

Scroll Anchoring is a browser feature that attempts to prevent a common situation where you may scroll down a webpage before the DOM has fully loaded and, when it does, any elements that load above your current location push you further down the page.

It makes sense why this would happen. There are CSS properties that we apply to elements that give them size (e.g. width), shape (e.g. transform) and position (e.g. margin). If those elements have not loaded by the time we have scrolled down the page, the DOM will continue to load them even though they are outside our current viewport and will expand physically to make room for those freshly loaded elements. As the DOM grows, our position on the page changes to accommodate those elements.

Scroll Anchoring prevents that "jumping" experience by locking the user's position on the page while changes are taking place in the DOM above the current location. This allows the user to stay anchored where they are on the page even as new elements are loaded to the DOM.

The overflow-anchor property allows us to opt-out of the Scroll Anchoring feature in the event that it is preferred to allow content to be re-flow as elements are loaded.

Syntax

article {
  overflow-anchor: [auto | none ];
}

Values

The overflow-anchor property accepts two values that essentially toggle whether or not the feature is enabled.

  • auto (default): Enables scroll anchoring on the portion of the page or element on which it is applied.
  • none: Disables scroll anchoring in part or all of a webpage, or excludes portions of the DOM from the being anchored, allowing content to reflow.

You'd probably apply this to the body, but you can scope it to any selector, and it will take affect if that element scrolls.

Demo

In this demo, as soon as you scroll in one of the boxes, it will add a bunch of green boxes to the top of that div. Normally that would push the content down immediately, potentially being a huge distraction and losing your place in the text. With scroll-anchoring: auto;, the scrolling place is preserved. scroll-anchoring: none; allows the newly-inserted divs to affect the scroll position.

See the Pen overflow-anchor by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

As of this writing, overflow-anchor is not a current W3C Standard, though the draft report of the proposed specification is available to read and has been adopted by Chrome since Version 56. Mozilla is considering a similar feature in Firefox. As more browsers adopt the Scroll Anchoring feature, we may expect to see more browser support for overflow-anchor since it gives explicit control to opt out of the feature.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
5643NoNoNoNo

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNo5659No

More Information

  • Scroll Anchoring: Proposed draft of the Scroll Anchoring specification
  • Chromium Blog: The blog post announcing Chrome's inclusion of Scroll Anchoring and the CSS property in Version 56
  • Bugzilla Ticket #43114: Open ticket to include the property in Firefox
This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag