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 effect 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 overflow-anchor: auto;, the scrolling place is preserved. overflow-anchor: none; allows the newly-inserted divs to affect the scroll position.

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

Another thing that can be done that can be super duper useful is pin the scroll position of an element to the bottom. So for example, a chat app where new messages are appended to the DOM at the bottom, and you want the scroll position to stay at the bottom showing all new messages:

See the Pen
"Stay at the bottom" scrolling with scroll-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.

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