CSS - overscroll-behavior-x Property
The CSS property overscroll-behavior-x determines what a browser does when the horizontal boundary of a scrolling area is reached.
You may refer the overscroll-behavior for a detailed information.
Possible Values
The CSS property overscroll-behavior-x is defined as one of the keywords as given below.
auto − The default scroll behavior is normal.
contain − The scroll behavior is seen only in the element where the value is set. No scrolling set on neighboring elements.
none − No scroll chaining behavior is seen. Default scroll overflow behavior is avoided.
Applies To
All non-replaced block-level elements and non-replaced inline-block elements.
Syntax
overscroll-behavior-x = contain | auto | none
CSS overscroll-behavior-x - contain Value
Following example demonstrates the use of overscroll-behavior-x: contain that sets the horizontal scroll effect contained and non-continuous.
<html> <head> <style> main { height: 500px; width: 2000px; background-color: slateblue; } main > div { height: 300px; width: 500px; overflow: auto; position: relative; top: 100px; left: 100px; overscroll-behavior-x: contain; } div > div { height: 100%; width: 1500px; background-color: lightblue; } p { padding: 10px; background-color: rgba(0, 0, 150, 0.2); margin: 0; width: 300px; position: relative; top: 10%; left: 2%; } </style> </head> <body> <h1>overscroll-behavior-x Property</h1> <main> <div> <div> <p> <b>overscroll-behavior-x</b> defines the horizontal scrolling area behavior. The value contain prevents the parent element getting scrolled. Thus preventing the scrolling chain experience. </p> </div> </div> </main> </body> </html>
CSS overscroll-behavior-x - auto Value
Following example demonstrates the use of overscroll-behavior-x: auto that sets the scrolling effect to default value, where the browser decides to scroll the parent element on reaching the boundary of the element it is applied on.
<html> <head> <style> main { height: 500px; width: 2000px; background-color: slateblue; } main > div { height: 300px; width: 500px; overflow: auto; position: relative; top: 100px; left: 100px; overscroll-behavior-x: auto; } div > div { height: 100%; width: 1500px; background-color: lightblue; } p { padding: 10px; background-color: rgba(0, 0, 150, 0.2); margin: 0; width: 300px; position: relative; top: 10%; left: 2%; } </style> </head> <body> <h1>overscroll-behavior-x Property</h1> <main> <div> <div> <p> <b>overscroll-behavior-x: auto</b> defines the horizontal scrolling area behavior. The value auto behaves like the normal scrolling behavior. It is the default value. </p> </div> </div> </main> </body> </html>
To Continue Learning Please Login
Login with Google