Open In App

CSS | overscroll-behavior-x Property

Improve
Improve
Like Article
Like
Save
Share
Report

The overscroll-behavior-x property is used to set the behavior of the browser when the horizontal boundary of a scrolling area is reached. This can be used in websites where there are multiple scrolling areas and scrolling one area does not affect the page as a whole. 

Syntax:

overscroll-behavior-x: auto | contain | none | initial | inherit

Note: The horizontal scroll can be tested by using the Shift button while scrolling.

Property Values:

  • auto: It is used to set the scrolling behavior to default on all the elements. The whole page will scroll even if the boundary of the element is reached. It is the default value. 
  • inherit: It is used to set the scrolling behavior to inherit from the parent.
  • contain: It is used to set the scrolling behavior to default only on the element used. No scroll-chaining would occur on the neighboring scrolling areas and the elements behind will not scroll. 
  • none: It is used to prevent scroll-chaining on all elements. The default scroll overflow behavior is also prevented. 
  • initial: It is used to set the over-scroll behavior to the default value. 

Example: In this example, we are using  overscroll-behavior-x: auto; property

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-x
    </title>
    <style>
        .main-content {
            height: 50px;
            width: 1000px;
            background-color: lightgreen;
        }
 
        .smaller-box {
            overscroll-behavior-x: auto;
            height: 250px;
            width: 300px;
            overflow-x: scroll;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | overscroll-behavior-x
    </b>
    <p>
        overscroll-behavior-x: auto
    </p>
    <div class="main-content">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
    </div>
    <div class="smaller-box">
        <img src=
        </img>
    </div>
</body>
</html>


Output: Scrolling horizontally on the smaller element

 auto

Example: In this example, we are using  overscroll-behavior-x: contain; property

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-x
    </title>
    <style>
        .main-content {
            height: 50px;
            width: 1000px;
            background-color: lightgreen;
        }
 
        .smaller-box {
            overscroll-behavior-x: contain;
 
            height: 250px;
            width: 300px;
            overflow-x: scroll;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | overscroll-behavior-x
    </b>
    <p>
        overscroll-behavior-x: contain
    </p>
    <div class="main-content">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
    </div>
    <div class="smaller-box">
        <img src=
        </img>
    </div>
</body>
</html>


Output: Scrolling horizontally on the smaller element

 contain

Example: In this example, we are using  overscroll-behavior-x: none; property

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-x
    </title>
    <style>
        .main-content {
            height: 50px;
            width: 1000px;
            background-color: lightgreen;
        }
 
        .smaller-box {
            overscroll-behavior-x: none;
 
            height: 250px;
            width: 300px;
            overflow-x: scroll;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | overscroll-behavior-x
    </b>
    <p>
        overscroll-behavior-x: none
    </p>
    <div class="main-content">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
    </div>
    <div class="smaller-box">
        <img src=
        </img>
    </div>
</body>
</html>


Output: Scrolling horizontally on the smaller element

 none

Example: In this example, we are using  overscroll-behavior-x: initial; property

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | overscroll-behavior-x
    </title>
    <style>
        .main-content {
            height: 50px;
            width: 1000px;
            background-color: lightgreen;
        }
 
        .smaller-box {
            overscroll-behavior-x: initial;
 
            height: 250px;
            width: 300px;
            overflow-x: scroll;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>
        CSS | overscroll-behavior-x
    </b>
    <p>
        overscroll-behavior-x: initial
    </p>
    <div class="main-content">
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions. The portal also
        has dedicated GATE preparation and
        competitive programming sections.
    </div>
    <div class="smaller-box">
        <img src=
        </img>
    </div>
</body>
</html>


Output: Scrolling horizontally on the smaller element

 initial

Supported Browsers: The browsers supported by overscroll-behavior-x property are listed below:

  • Chrome 63.0
  • Firefox 59.0
  • Opera 50.0


Last Updated : 12 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads