CSS - overscroll-behavior-inline Property
The CSS property overscroll-behavior-inline determines the behavior of the browser when the inline direction boundary of a scrolling area has been reached.
You may refer the overscroll-behavior for a detailed information.
Possible Values
The CSS property overscroll-behavior-inline is defined as a keyword from the list 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-inline = contain | auto | none
CSS overscroll-behavior-inline - contain Value
Following example demonstrates the use of overscroll-behavior-inline: contain that sets the horizontal scroll effect contained and non-continuous.
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <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-inline: 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-inline Property</h1> <main> <div> <div> <p> <b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) 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-inline - auto Value
Following example demonstrates the use of overscroll-behavior-inline: auto that sets the horizontal scroll effect continuous like a chain.
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <style> main { height: 500px; width: 5000px; background-color: rgb(220, 200, 100); } main > div { height: 300px; width: 500px; overflow: auto; position: relative; top: 100px; left: 100px; overscroll-behavior-inline: auto; } div > div { height: 100%; width: 1500px; background-color: lightgoldenrodyellow; } p { padding: 10px; background-color: rgba(100, 100, 100, 0.2); margin: 0; width: 300px; position: relative; top: 10%; left: 2%; } </style> </head> <body> <h1>overscroll-behavior-inline: auto Property</h1> <main> <div> <div> <p> <b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) area behavior. The value auto sets the parent element getting scrolled after the inline boundary of the scrollable element has been raeched. Thus giving the scrolling chain experience. </p> </div> </div> </main> </body> </html>
To Continue Learning Please Login
Login with Google