Limited supportLimited browser support. Check compatibility before use.
Scrolling Limited support

overflow-anchor

The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.

Scrolling

Overview

The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
overflow-anchor
56
79
66
Preview
56
auto
56
79
66
56
none
56
79
66
56
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.dynamic-content {
  overflow-anchor: none;
}
.stable-content {
  overflow-anchor: auto;
}

Live demo

anchor: none

CSS Anchor: none demo.

PreviewFullscreen

anchor: auto

CSS Anchor: auto demo.

PreviewFullscreen

chat style UI

CSS chat styleUI demo.

PreviewFullscreen

Use cases

  • Using overflow-anchor

    The overflow-anchor CSS property sets an element as a possible scroll anchor, reducing unintended scrolling when document changes occur above the current scrollport. This is enabled by default where supported.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features