CSS overscroll-behavior-block

The overscroll-behavior-block property in CSS allows you to control the behavior of scrolling when reaching the top or bottom of a scrollable element. By default, when you reach the edge of a scrollable element, the page continues to scroll, causing the whole page to scroll instead of just the scrollable element. The overscroll-behavior-block property can be used to prevent this behavior.

The syntax for using the overscroll-behavior-block property is as follows:


element {
  overscroll-behavior-block: auto | contain | none;
}

The values for the overscroll-behavior-block property are:

  1. auto: The default value. Indicates that the browser should provide a default scrolling behavior.
  2. contain: When reaching the top or bottom of the scrollable element, the scrolling is constrained to the scrollable element itself.
  3. none: Scrolling is disabled when reaching the top or bottom of the scrollable element.
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at fermentum lorem. Sed accumsan lacinia nunc vitae blandit.

In the example above, the overscroll-behavior-block property is set to contain, which means that when scrolling reaches the top or bottom of the scrollable element, the scrolling is constrained within the scrollable element itself.