CSS overscroll-behavior-block Property

Description

The overscroll-behavior-block CSS property is used to control the behavior of scrollable elements when they reach the boundaries of their scrollable block axis (typically the vertical axis). It allows web developers to define how content within a scrollable container responds to user scrolling when it reaches the end of its block axis. This property can be set to values like "auto," "contain," or "none." "Auto" allows the browser to decide the scrolling behavior, "contain" prevents the container from scrolling past its content, and "none" disables any custom overscroll effects, letting the browser handle scrolling as usual. This property is particularly useful for creating smoother and more predictable scrolling experiences on websites and applications.

Initial value: auto
Applies to: non-replaced block-level elements and non-replaced inline-block elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.overscrollBehaviorBlock

Syntax

overscroll-behavior-block: auto | contain | none

Values

autoThe default scroll overflow behavior occurs as normal.
containDefault scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
noneNo scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

Example

HTML

<main>

  <div>

    <div>

      <p>

        <code>overscroll-behavior-block</code> has been used to make it so that

        when the scroll boundaries of the yellow inner box are reached, the

        whole page does not begin to scroll.

      </p>

    </div>

  </div>

</main>

CSS

main {
  height: 3000px;
  width: 500px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-block: contain;
}

div > div {
  height: 1500px;
  width: 100%;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

p {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 0;
  width: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}

Result

Editor