1. css
  2. /properties
  3. /overscroll-behavior-block

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

ValueDescription
autoThe browser uses its default overscroll behavior. This is the initial value.
containThe browser confines the overscroll to the boundary of the element, preventing it from propagating to the parent or ancestor elements.
noneThe 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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesYes