CSS overflow-anchor property

Definition and Usage

overflow-anchor This property is used to turn off scroll anchoring (scroll anchoring).

Scroll anchoring is a feature of the browser used to prevent the area that has already been scrolled into the viewport from moving when new content is loaded. This is often a problem when the network connection is slow, that is, when the user scrolls down and starts reading before the page is fully loaded.

Example

Turn off scroll anchoring:

div {
  overflow-anchor: none;
}

Try It Yourself

CSS Syntax

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

Property Value

Value Description
auto Default Value. Enable scroll anchoring.
none Disable Scroll Anchoring.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Production: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.overflowAnchor="none"

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
56.0 79.0 66.0 Not Supported 43.0

Related Pages

Tutorial:CSS Overflow

Reference:CSS overflow property