overscroll-behavior-x

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-x CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.

See overscroll-behavior for a full explanation.

Syntax

/* Keyword values */
overscroll-behavior-x: auto; /* default */
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/* Global values */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;

The overscroll-behavior-x 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-x = 
  contain  |
  none     |
  auto

Examples

Preventing an underlying element from scrolling horizontally

In our overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other. The outer box has a large width set on it so the page will scroll horizontally. The inner box has a small width (and height) set on it so it sits comfortably inside the viewport, but its content is given a large width so it will scroll horizontally.

By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this, you can set overscroll-behavior-x: contain on the inner box:

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

Specifications

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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`overscroll-behavior-x`	63	18	59	50	16	63	59	46	16	8.0	63
`auto`	63	18	59	50	16	63	59	46	16	8.0	63
`contain`	63	18	59	50	16	63	59	46	16	8.0	63
`none`	63	79 18–79 The `none` value incorrectly behaves as `contain` (allowing for the elastic bounce effect).	59	50	16	63	59	46	16	8.0	63