CSS | overscroll-behavior Property Last Updated : 21 Nov, 2019 Comments Improve Suggest changes Like Article Like Report The overscroll-behavior property is used to set the behavior of the browser when the boundary of a scrolling area is reached. This property can be used to prevent unwanted scrolling in pages where there are multiple scroll areas. It is a shorthand for the overscroll-behavior-x and overscroll-behavior-y properties. Syntax: overscroll-behavior: auto | contain | none | initial | inherit Property Values: auto: It is used to set the scrolling behavior to default. The whole page along with the element will scroll even if the boundary of the element is reached. It is the default value. Example: html <!DOCTYPE html> <html> <head> <title> CSS | overscroll-behavior </title> <style> .container { display: flex; } .main-content { width: 200px; background-color: lightgreen; } .smaller-box { overscroll-behavior: auto; height: 100px; width: 125px; margin: 25px; overflow-y: scroll; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>CSS | overscroll-behavior</b> <p>overscroll-behavior: auto</p> <div class="container"> <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.<br><br> 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"> This is a smaller element that is also scrollable. The overscroll behavior can be used to control if the main content behind would scroll when this element's vertical boundary is reached. </div> </div> </body> </html> Output: Scrolling down on the smaller element contain: It is used to set the scrolling behavior to default only on the element used. Scrolling the element further after it has reached the boundary will not scroll the elements behind it. No scroll-chaining would occur in the neighboring scrolling areas. Example: html <!DOCTYPE html> <html> <head> <title> CSS | overscroll-behavior </title> <style> .container { display: flex; } .main-content { width: 200px; background-color: lightgreen; } .smaller-box { overscroll-behavior: contain; height: 100px; width: 125px; margin: 25px; overflow-y: scroll; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>CSS | overscroll-behavior</b> <p>overscroll-behavior: contain</p> <div class="container"> <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.<br><br> 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"> This is a smaller element that is also scrollable. The overscroll behavior can be used to control if the main content behind would scroll when this element's vertical boundary is reached. </div> </div> </body> </html> Output: Scrolling down on the smaller element none: It is used to prevent scroll-chaining on all elements. The default scroll overflow behavior is also prevented. Example: html <!DOCTYPE html> <html> <head> <title> CSS | overscroll-behavior </title> <style> .container { display: flex; } .main-content { width: 200px; background-color: lightgreen; } .smaller-box { overscroll-behavior: none; height: 100px; width: 125px; margin: 25px; overflow-y: scroll; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>CSS | overscroll-behavior</b> <p>overscroll-behavior: none</p> <div class="container"> <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.<br><br> 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"> This is a smaller element that is also scrollable. The overscroll behavior can be used to control if the main content behind would scroll when this element's vertical boundary is reached. </div> </div> </body> </html> Output: Scrolling down on the smaller element initial: It is used to set the overscroll behavior to default value. Example: html <!DOCTYPE html> <html> <head> <title> CSS | overscroll-behavior </title> <style> .container { display: flex; } .main-content { width: 200px; background-color: lightgreen; } .smaller-box { overscroll-behavior: initial; height: 100px; width: 125px; margin: 25px; overflow-y: scroll; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>CSS | overscroll-behavior</b> <p>overscroll-behavior: initial</p> <div class="container"> <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.<br><br> 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"> This is a smaller element that is also scrollable. The overscroll behavior can be used to control if the main content behind would scroll when this element's vertical boundary is reached. </div> </div> </body> </html> Output: Scrolling down 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 property are listed below: Chrome 63.0 Firefox 59.0 Edge 18.0 Opera 50.0 Comment More infoAdvertise with us Next Article CSS overscroll-behavior-inline Property S sayantanm19 Follow Improve Article Tags : Web Technologies CSS CSS-Properties Similar Reads CSS | overscroll-behavior-x Property 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: 4 min read CSS overscroll-behavior-y Property The overscroll-behavior-y property is used to set the behavior of the browser when the vertical 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. This effect is known as scroll-ch 5 min read 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 2 min read Tailwind CSS overscroll Behavior This class accepts more than one value in tailwind CSS. It is the alternative to the CSS Overscroll-behavior property. This class is used to set the behavior of the browser when the boundary of a scrolling area is reached. This property can be used to prevent unwanted scrolling in pages where there 9 min read CSS overflow Property The CSS overflow property is used to set the overflow behavior of an element. It is the shorthand property of overflow-x and overflow-y properties. This property is used to control the large content.Syntax:overflow: visible | hidden | clip | scroll | auto;Property Values:visible: The content is not 2 min read CSS overflow-x Property The overflow-x property in CSS specifies whether to add a scroll bar, clip the content, or display overflow content of a block-level element, when it overflows at the left and right edges. In other words, this property helps us to display the content which is overflowing from the page horizontally.T 3 min read Like