CSS overscroll-behavior-inline Property

This property specifies how the browser will behave when it reaches the inline direction boundary of a scrolling area.

Syntax:

overscroll-behavior-inline: auto | contain | none;

Property Values:

• auto: It is the default value, the overscroll behavior is normal.
• contain: It applies default behavior to the respective element but prevents scroll chaining of underlying elements.
• none: It prevents both scroll chaining and defaults overscroll behavior.

Usage of OverScroll-behaviour-inline Property.

It can be used to prevent inline over scrolling. Consider the following scenario where two block-level elements are present, one containing the other. The outer block and the inner block, both have respective horizontal scrolls. By default, when we scroll inside the inner block and its boundary is reached, the whole page will begin to scroll, which has to be avoided. By using the overscroll-behavior-inline property in the inner block, we can prevent this situation.

Example:

Output:

Supported Browsers:

• Chrome 77.0 and above
• Edge 79.0 and above
• Firefox 73.0 and above
• Opera 64.0 and above