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
containvalue 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 |