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+ | ✕ | 66.0+ | ✕ | 43.0+ |
Practice Your Knowledge
What is the function of the CSS 'overflow-anchor' property?
Correct!
Incorrect!
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.