overscroll-behavior-block
Definition
The overscroll-behavior-block CSS property specifies the browser's behavior when the user overscrolls in the vertical direction (i.e., when they scroll past the content and continue to scroll using a touch or mouse input) in a block-level element such as a <div> or <section>.
Examples
Use the default overscroll behavior:
.container {
overscroll-behavior-block: auto;
}
Confine overscrolling to the element:
.article {
overscroll-behavior-block: contain;
}
Disable overscrolling in the element:
.sidebar {
overscroll-behavior-block: none;
}
Values
| Value | Description |
|---|---|
auto | The browser uses its default overscroll behavior. This is the initial value. |
contain | The browser confines the overscroll to the boundary of the element, preventing it from propagating to the parent or ancestor elements. |
none | The browser does not allow overscrolling in the element. |
Best Practices
- Use contain to prevent overscrolling from propagating to parent or ancestor elements. This can improve the overall user experience by preventing unexpected scrolling behavior.
- Use none sparingly, and only when it is necessary to completely disable overscrolling in a particular element. Disabling overscrolling entirely can be jarring for users and make it more difficult to navigate the page.
- Keep in mind that the overscroll-behavior-block property only applies to block-level elements, and that overscrolling behavior for inline-level elements is controlled by the overscroll-behavior-inline property.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | No | Yes | Yes |