overscroll-behavior-y

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

The overscroll-behavior-y CSS property sets the browser's behavior when the vertical boundary of a scrolling area is reached.

See overscroll-behavior for a full explanation.

Syntax

css

/* Keyword values */ overscroll-behavior-y: auto; /* default */ overscroll-behavior-y: contain; overscroll-behavior-y: none; /* Global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: revert; overscroll-behavior-y: revert-layer; overscroll-behavior-y: unset;

The overscroll-behavior-y property is specified as a keyword chosen from the list of values below.

Values

auto: The default scroll overflow behavior occurs as normal.
contain: Default scroll overflow behavior (e.g., "bounce" effects) is observed inside the element where this value is set. However, no scroll chaining occurs on neighboring scrolling areas; the underlying elements will not scroll. The contain value disables native browser navigation, including the vertical pull-to-refresh gesture and horizontal swipe navigation.
none: No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

Formal definition

Initial value	`auto`
Applies to	non-replaced block-level elements and non-replaced inline-block elements
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

overscroll-behavior-y = 
 contain |
 none |
 auto

Examples

Preventing an underlying element from scrolling vertically

css

.messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; }

See overscroll-behavior for a full example and explanation.

Specifications

Specification
CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical