CSS overscroll-behavior-block attribute

Definition and Usage

overscroll-behavior-block The attribute is used to disable scroll chaining or overscroll affordance on the element when attempting to scroll beyond the scroll boundaries in the block direction.

The scroll chain refers to the scroll behavior of the parent element when over-scrolling occurs on an element. This is the default behavior.

Over-scroll feedback is the feedback given when the user tries to scroll beyond the scroll boundary. For example, on mobile devices, when trying to scroll beyond the top of the page, there is usually a visual feedback of page refresh.

CSS's overscroll-behavior-block and overscroll-behavior-inline property is related to overscroll-behavior-x and overscroll-behavior-y properties are very similar, but overscroll-behavior-block and overscroll-behavior-inline The property depends on the block direction and inline direction.

Note:Related CSS Properties writing-mode It defines the block direction. This affects whether the block direction is in the x-direction or y-direction, and overscroll-behavior-block The result of the property. For English pages, the block direction is downward, and the inline direction is from left to right.

Example

Example 1

Turn off the scroll chain for the scrollable <div> element in the block direction:

#yellowDiv {
  overscroll-behavior-block: contain;
}

Try It Yourself

Example 2: Combining the writing-mode attribute

Sets the <div> element's writing-mode When the attribute value is set to 'vertical-rl', the block direction becomes the x-direction, so overscroll-behavior-block Now it works in the x-direction instead of the y-direction:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}

Try It Yourself

CSS Syntax

overscroll-behavior-block: auto|contain|none|initial|inherit;

Property Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Related Pages

Reference:CSS overscroll-behavior attribute

Reference:CSS overscroll-behavior-inline attribute

Reference:CSS overscroll-behavior-x attribute

Reference:CSS overscroll-behavior-y attribute

Reference:CSS scroll-behavior attribute

Reference:CSS scroll-margin attribute

Reference:CSS scroll-padding property

Reference:CSS scroll-snap-align property

Reference:CSS writing-mode attribute