CSS overscroll-behavior-y

The overscroll-behavior-y property in CSS allows you to control the behavior of browser overscrolling in the vertical direction (up and down). Overscrolling occurs when a user scrolls past the boundaries of a scrollable element, causing the browser to display a "bounce" or rubber band effect. By using the overscroll-behavior-y property, you can customize how the browser responds to overscrolling events.

The overscroll-behavior-y property can take the following values:

auto: The browser provides the default overscroll behavior.
contain: The scroll chaining and rubber-banding effects are disabled, allowing the scroll to propagate to the parent container.
none: The browser ignores overscroll events in the vertical direction.

Let's see some examples of how to use the overscroll-behavior-y property:

Result:


    .scrollable-element {
      overscroll-behavior-y: auto;
      height: 200px;
      overflow-y: scroll;
      border: 1px solid black;
    }

In this example, the overscroll-behavior-y property is set to auto for a scrollable element. As you scroll up and down within the element, the browser will provide the default overscroll behavior.

Result:


    .scrollable-element {
      overscroll-behavior-y: contain;
      height: 200px;
      overflow-y: scroll;
      border: 1px solid black;
    }

In this example, the overscroll-behavior-y property is set to contain for a scrollable element. As you scroll up and down within the element, the scroll chaining and rubber-banding effects are disabled.

Result:


    .scrollable-element {
      overscroll-behavior-y: none;
      height: 200px;
      overflow-y: scroll;
      border: 1px solid black;
    }

In this example, the overscroll-behavior-y property is set to none for a scrollable element. The browser will ignore overscroll events in the vertical direction.