CSS overflow-anchor Property

The overflow-anchor property allows you to opt out of Scroll Anchoring, a browser feature that adjusts the 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

CSS overflow-anchor

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

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

CSS overflow-anchor syntax

body {
  overflow-anchor: none;
}

Values

Value	Description
auto	Adjusts 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 parent element.

Practice

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

It forces the browser to enable or disable the 'scroll anchoring'.It changes the color of the anchor tag.It helps to adjust layout according to the screen size.It controls the browser’s scroll position to prevent unexpected jumps.It defines the shape of an anchor element.