CSS - overscroll-behavior

The CSS property overscroll-behavior is a shorthand property that determines what a browser does when the boundary of a scrolling area is reached.

The constituent properties of this property are overscroll-behavior-x and overscroll-behavior-y .

Scroll chaining is a behavior that is observed when a user scrolls past the boundary (top, bottom, left or right) of a scrollable element, causing the scrolling on an ancestor element. This creates a chain effect in scrolling.

For example, if you have a modal dialog box on the webpage, that has content which can be scrolled vertically. As you reach the end of the scrollable area of this modal, the scrolling continues on the main page’s content behind the modal dialog box. This continuous scrolling experience is called the scroll chaining.

This behavior may or may not be desirable and in order to avoid it, the property overscroll-behavior is used. The property is applied only on the scrollable containers . Setting this property on <iframe> has no effect and thus it needs to be set on both the <html> and the <body> elements of the iframe’s document.

Possible Values

The CSS property overscroll-behavior is defined as one or two of the keywords as given below. The two keywords specifies the value on the x and y axes respectively. When only one value is specified, both the x and y axes have the same value.

• auto − The default scroll behavior is normal.

auto − The default scroll behavior is normal.

• contain − The scroll behavior is seen only in the element where the value is set. No scrolling set on neighboring elements.

contain − The scroll behavior is seen only in the element where the value is set. No scrolling set on neighboring elements.

• none − No scroll chaining behavior is seen. Default scroll overflow behavior is avoided.

none − No scroll chaining behavior is seen. Default scroll overflow behavior is avoided.

Applies To

All non-replaced block-level elements and non-replaced inline-block elements.

Syntax

overscroll-behavior = [ contain | auto | none ]{1,2}

CSS overscroll-behavior - auto Value

Following example demonstrates the use of overscroll-behavior: auto that sets the scroll effect continuous. So as the boundary of the scrollable element is reached, on scrolling, the parent element gets scrolled.

CSS overscroll-behavior - Comparison of Values

Following example demonstrates the use of overscroll-behavior: contain that sets the scrolling effect contained to the element it is applied. So as the boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled.

CSS overscroll-behavior - Two Keyword Values

Following example demonstrates the use of overscroll-behavior: auto contain (two values), that sets the scrolling effect auto on x axis and contained on y-axis. So as the vertical boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled (as contained), but the horizontal boundary set as auto, which leads to scrolling of parent element on the x-axis.

CSS overscroll-behavior - Associated Properties

Following table lists down the CSS properties that are associated with overscroll-behavior property: