CSS overflow-anchor Property

The overflow-anchor property allows to opt out Scroll Anchoring, a browser feature which adds scroll position to minimize content shifts.

Scroll Anchoring is enabled by default in any supported browser.

This property has two values: auto and none.

Initial Value auto
Applies to All elements.
Inherited No.
Animatable No.
Version CSS Scroll Anchoring Module Level 1
DOM Syntax object.style.overflowAnchor = "none";

Syntax

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

You can insert the following piece of code with the overflow-anchor property into your CSS code:

body {
overflow-anchor: none;
}

Values

Value Description
auto Adjustes scroll anchoring position thus making an element an anchor.
none Disables scroll anchoring making the content reflow.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

56.0+ x 66.0+ x 43.0+

Practice Your Knowledge

Scroll Anchoring is a browser feature which adds scroll position



Do you find this helpful?

Related articles