CSS | overscroll-behavior-x Property - GeeksforGeeks

21 Nov, 2019
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.Example:<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>Output: Scrolling horizontally on the smaller element
Example:
<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>
Output: Scrolling horizontally on the smaller element
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.Example:<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>Output: Scrolling horizontally on the smaller element
Example:
<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>
Output: Scrolling horizontally on the smaller element
none: It is used to prevent scroll-chaining on all elements. The default scroll overflow behavior is also prevented.Example:<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>Output: Scrolling horizontally on the smaller element
Example:
<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>
Output: Scrolling horizontally on the smaller element
initial: It is used to set the overscroll behavior to default value.Example:<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>Output: Scrolling horizontally on the smaller element
Example:
<!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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"></img>  </div></body></html>
Output: Scrolling horizontally on the smaller element
inherit: It is used to set the scrolling behavior to inherit from the parent.
Supported Browsers: The browsers supported by overscroll-behavior-x property are listed below:
Chrome 63.0
Firefox 59.0
Opera 50.0
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
Design a web page using HTML and CSS
Search Bar using HTML, CSS and JavaScript
How to wrap the text around an image using HTML and CSS ?
Express.js express.Router() Function
How to set input type date in dd-mm-yyyy format using HTML ?
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript