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.
/* 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: unset;
The overscroll-behavior-x
property is specified as a keyword chosen from the list of values below.
auto
contain
none
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 |
contain | none | auto
In our simple 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 comforably 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; }
Specification | Status | Comment |
---|---|---|
CSS Overscroll Behavior Module Level 1 The definition of 'overscroll-behavior-x' in that specification. | Working Draft |
Desktop | ||||||
---|---|---|---|---|---|---|
overscroll-behavior-x |
63 | 18
|
59 | No | 50 | No
|
Mobile | ||||||
---|---|---|---|---|---|---|
overscroll-behavior-x |
63 | 63 | 59 | 46 | No
|
8.0 |
overscroll-behavior-inline
, overscroll-behavior-block
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x