CSS - overscroll-behavior-block Property

The CSS property overscroll-behavior-block determines the behavior of the browser when the block 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-block 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-block =  contain | auto | none

CSS overscroll-behavior-block - contain Value

Following example demonstrates the use of overscroll-behavior-block: contain that sets the scrolling effect contained to the element it is applied. So as the block boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled.

<html>
<head>
<meta name="viewport" content="width=device-width" />
<style>
   main {
      height: 2500px;
      width: 100%;
      background-color: slateblue;
   }

   main > div {
      height: 200px;
      width: 400px;
      overflow: auto;
      position: relative;
      top: 50px;
      left: 50px;
      overscroll-behavior-block: contain;
   }

   div > div {
      height: 500px;
      width: 100%;
      background-color: lightblue;
   }

   p {
      padding: 10px;
      background-color: rgba(0, 0, 150, 0.2);
      margin: 0;
      width: 250px;
      position: relative;
      top: 10px;
      left: 2%;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-block Property</h1>
   <main>
      <h3>Scroll the content inside the small box and continue to scroll.</h3>
      <div>
         <div>
            <p>
            <b>overscroll-behavior-block</b> defines the vertical 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-block - Comparison of Values

Following example demonstrates the use of overscroll-behavior-block. There are two boxes with same content, but one has the contain value set and the other is default value of auto. The comparison of scrolling behavior in the two boxes can be seen. The one with contain value does not show the scrolling chain effect, whereas the other box exhibits that.

<html>
<head>
<style>
   div {
      margin: 5px 15px;
      padding: 3px;
      border: solid black 1px;
      overflow: auto;
      border: 2px solid black;
   }

   #main-box {
      display: flex;
      flex-wrap: wrap;
      background-color: darkcyan;
      height: 800px;
   }

   #box-auto {
      background-color: pink;
   }

   #box-contain {
      background-color: aliceblue;
      overscroll-behavior: contain;
   }
   
   #main-box > div {
      flex: 1;
      height: 150px;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-block Property</h1>
   <p>The two boxes displayed below has overscroll-behavior-block set as auto and contain, respectively.</p>
   <p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>
   <p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p>
   <div id="main-box">
   <div id="box-auto">
      <h3>overscroll-behavior-block: auto</h3>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
      </p>
   </div>
   <div id="box-contain">
      <h3>overscroll-behavior-block: contain</h3>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
      </p>
   </div>
   </div>
</body>
</html>
Advertisements