CSS overscroll-behavior

The overscroll-behavior property in CSS is used to control the behavior of the browser when the user reaches the boundary of a scrollable area. It allows you to customize how the browser reacts when the user scrolls beyond the edges of the content.

The overscroll-behavior property can have one or more of the following values:

auto: The default value. The browser decides how to handle overscrolling.
contain: The browser prevents the default behavior of scrolling past the edge of the content.
none: The browser does not rubber band or glow on reaching the edge of the content.

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

Result:


    .scrollable {
      width: 300px;
      height: 200px;
      overflow: scroll;
      overscroll-behavior: contain;
    }

1	2	3
4	5	6
7	8	9

In the example above, we have a scrollable container with a fixed width and height. The overscroll-behavior: contain; property prevents the default behavior of scrolling past the edge of the content.

Result:


    .scrollable {
      width: 300px;
      height: 200px;
      overflow: scroll;
      overscroll-behavior: none;
    }

A	B	C
D	E	F
G	H	I

In the example above, we have another scrollable container with a fixed width and height. The overscroll-behavior: none; property prevents the browser from rubber banding or glowing on reaching the edge of the content.

Experiment with different values of the overscroll-behavior property to see how it affects the scrolling behavior in your own projects!