Open In App
Related Articles

CSS overscroll-behavior-inline Property

Improve Article
Save Article
Like Article

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


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.




<!DOCTYPE html>
    <title>overscroll behavior inline</title>
        #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;
    <div id="outerbox">
        <div id="innerbox">
            <div id="content">
                    GEEKS FOR GEEKS<br>This green block has 
                    overscroll-behavior-inline property,
                    inline overscrolling can be prevented here.


Supported Browsers:

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

Last Updated : 01 Sep, 2021
Like Article
Save Article
Similar Reads
Related Tutorials