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>

列印頁面