CSS overscroll-behavior-block Property
Example
Turn off scroll chaining for a scrollable <div> element in the block direction:
#yellowDiv {
overscroll-behavior-block: contain;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The overscroll-behavior-block
property is used to turn off scroll chaining or overscroll affordance on an element when you try to scroll past the scroll boundary in the block direction.
Scroll chaining is when overscrolling on an element leads to scroll behavior on the parent element. This is default behavior.
Overscroll affordance is a feedback to the user when trying to scroll beyond the scroll boundary. For example, a visual feedback together with a page refresh normally happens on mobile devices when tying to scroll beyond the top of a page.
The CSS
overscroll-behavior-block
and
overscroll-behavior-inline
properties are very similar to CSS properties
overscroll-behavior-x
and
overscroll-behavior-y
, but the
overscroll-behavior-block
and
overscroll-behavior-inline
properties are dependent on block and inline directions.
Note: The related CSS property writing-mode
defines block direction. This affects whether the block direction is in the x-direction or y-direction and the result of the overscroll-behavior-block
property. For pages in English, block direction is downward and inline direction is left to right.
Default value: | auto |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.overscrollBehaviorBlock="none" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
overscroll-behavior-block | 63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
CSS Syntax
overscroll-behavior-block: auto|contain|none|initial|inherit;
Property Values
Value | Description |
---|---|
auto | Allows scroll chaining and overscroll affordance behavior. This is default |
contain | Allows overscroll affordance behavior, but not scroll chaining. |
none | Does not allow overscroll affordance or scroll chaining behavior. |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
With writing-mode property
With the writing-mode
property value of a <div> element set to 'vertical-rl', the block direction is in the x-direction, and so the overscroll-behavior-block now works in the x-direction instead of the y-direction:
#yellowDiv {
writing-mode: vertical-rl;
overscroll-behavior-block: contain;
}
Try it Yourself »
Related Pages
CSS overscroll-behavior property: CSS Overscroll-behavior property
CSS overscroll-behavior-inline property: CSS Overscroll-behavior-inline property
CSS overscroll-behavior-x property: CSS Overscroll-behavior-x property
CSS overscroll-behavior-y property: CSS Overscroll-behavior-y property
CSS scroll-behavior property: CSS Scroll-behavior property
CSS scroll-margin property: CSS Scroll-margin property
CSS scroll-padding property: CSS Scroll-padding property
CSS scroll-snap-align property: CSS Scroll-snap-align property
CSS writing-mode property: CSS Writing-mode property