The overscroll-behavior-block
CSS property sets the browser's behavior when the block direction boundary of a scrolling area is reached.
See overscroll-behavior
for a full explanation.
/* Keyword values */ overscroll-behavior-block: auto; /* default */ overscroll-behavior-block: contain; overscroll-behavior-block: none; /* Global values */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; overscroll-behavior-block: unset;
The overscroll-behavior-block
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 this demo we have two block-level boxes, one inside the other. The outer box has a large height
set on it so the page will scroll vertically. 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 height
so it will also scroll vertically.
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 happening in the block direction, we've set overscroll-behavior-block: contain
on the inner box.
<main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main>
main { height: 3000px; width: 500px; background-color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; }
Specification | Status | Comment |
---|---|---|
CSS Overscroll Behavior Module Level 1 The definition of 'overscroll-behavior-block' in that specification. | Working Draft |
Desktop | ||||||
---|---|---|---|---|---|---|
overscroll-behavior-block |
77 | 79 | 73 | No | 64 | No
|
Mobile | ||||||
---|---|---|---|---|---|---|
overscroll-behavior-block |
77 | 77 | No | 55 | No
|
12.0 |
© 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-block