Turn off scroll chaining for a scrollable <div> element in the block direction:
#yellowDiv {
overscroll-behavior-block: contain;
}
Try it Yourself »
Definition overscroll-behavior-block
Подработка: Перевод страницы
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 overscroll-behavior-block
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
overscroll-behavior-block: auto|contain|none|initial|inherit;
Property Values overscroll-behavior-block
| 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 overscroll-behavior-block
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 overscroll-behavior-block
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