overscroll-behavior-y CSS property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
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-y =
contain |
none |
auto |
chain
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 |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
overscroll-behavior-y
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
contain
|
|
|
|
|
|
|
|
|
|
|
|
|
none
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.