CSS - overscroll-behavior-block 属性

CSS 属性 overscroll-behavior-block 确定当滚动区域的块方向边界已到达时浏览器的行为。

您可以参考 overscroll-behavior 获取详细信息。

可能的值

CSS 属性 overscroll-behavior-block 定义为以下列表中的关键字。

auto − 默认滚动行为正常。
contain − 滚动行为仅在其设置值的元素中可见。相邻元素上没有设置滚动。
none − 没有滚动链行为。避免默认滚动溢出行为。

应用于

所有非替换块级元素和非替换内联块级元素。

语法

overscroll-behavior-block =  contain | auto | none

CSS overscroll-behavior-block - contain 值

以下示例演示了 overscroll-behavior-block: contain 的用法，该用法将滚动效果限制在其应用到的元素中。因此，当达到可滚动元素的块边界时，滚动时父元素不会滚动。

<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 - 值比较

以下示例演示了 overscroll-behavior-block 的用法。有两个内容相同的盒子，但其中一个设置了 contain 值，另一个是 auto 的默认值。可以看出这两个盒子滚动行为的比较。具有 contain 值的盒子不显示滚动链效果，而另一个盒子则显示该效果。

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

打印页面