CSS overscroll-behavior-inline Property

Last Updated : 01 Sep, 2021

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.

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:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>overscroll behavior inline</title> 
    <style> 
        #outerbox { 
            height: 300px; 
            width: 3000px; 
        } 
  
        #innerbox { 
            height: 300px; 
            width: 400px; 
            overflow: auto; 
            position: relative; 
            top: 50px; 
            left: 50px; 
            overscroll-behavior-inline: contain; 
        } 
  
        #content { 
            height: 100%; 
            width: 1500px; 
            background-color: green; 
        } 
  
        p { 
            padding: 10px; 
            background-color: rgba(255, 255, 255, 0.5); 
            margin: 0; 
            width: 360px; 
            position: relative; 
            top: 10px; 
            left: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="outerbox"> 
        <div id="innerbox"> 
            <div id="content"> 
                <p> 
                    GEEKS FOR GEEKS<br>This green block has  
                    overscroll-behavior-inline property, 
                    inline overscrolling can be prevented here. 
                </p> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 