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