CSS overflow-anchor Property
The overflow-anchor CSS property specifies whether the scroll anchoring position should be applied to the element or not. See property values and examples.
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
Practice
What is the function of the CSS 'overflow-anchor' property?