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.