CSS overflow-anchor Property

Description

The overflow-anchor CSS property is used to control how an element should behave when it is partially scrolled out of view within a scrolling container. When set to "auto," which is the default value, the browser determines whether the element should remain anchored and not scroll away completely, making it partially visible even when the user scrolls. This property is particularly useful for improving user experience when dealing with long lists or tables, ensuring that important elements stay in view and accessible as users scroll through content. It helps prevent abrupt shifts in layout and enhances the overall usability of a webpage.

Initial value

auto

Applies to

all elements

Inherited

no

Computed value

as specified

Animatable

discrete

JavaScript syntax

object.style.overflowAnchor

Syntax

overflow-anchor: auto | none

Values

• autoThe element becomes a potential anchor when adjusting scroll position.
• noneThe element won't be selected as a potential anchor.

Example

* {
  overflow-anchor: none;
}

Browser Support

The following table will show you the current browser support for the CSS overflow-anchor property.

Desktop
79	56	66	43	x

Tablets / Mobile
56	66	43	x	6	56

Last updated by CSSPortal on: 31st December 2023