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

chrome edge firefox safari opera
56.0+ 66.0+ 43.0+

Practice Your Knowledge

What is the function of the CSS 'overflow-anchor' property?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?