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>
Advertisements