CSS - overscroll-behavior

CSS 屬性 overscroll-behavior 是一個簡寫屬性，用於確定當瀏覽器到達滾動區域的邊界時會發生什麼。

此屬性的組成屬性為 overscroll-behavior-x 和 overscroll-behavior-y。

滾動鏈 是當用戶滾動到可滾動元素的邊界（頂部、底部、左側或右側）之外時觀察到的行為，從而導致祖先元素上的滾動。這會產生連鎖滾動的效果。

例如，如果您在網頁上有一個模態對話方塊，其中包含可以垂直滾動的內容。當您到達此模態的可滾動區域的末尾時，滾動將繼續在模態對話方塊後面的主頁內容上進行。這種連續的滾動體驗稱為滾動鏈。

這種行為可能是或可能不是理想的，為了避免這種情況，使用 overscroll-behavior 屬性。該屬性僅應用於 可滾動容器。在 <iframe> 上設定此屬性無效，因此需要在 iframe 文件的 <html> 和 <body> 元素上都設定它。

可能的值

CSS 屬性 overscroll-behavior 定義為一個或兩個如下所示的關鍵字。兩個關鍵字分別指定 x 和 y 軸上的值。當僅指定一個值時，x 和 y 軸具有相同的值。

auto - 預設滾動行為是正常的。
contain - 滾動行為僅在設定該值的元素中可見。不會在相鄰元素上設定滾動。
none - 沒有滾動鏈行為。避免預設的滾動溢位行為。

應用於

所有非替換塊級元素和非替換內聯塊級元素。

語法

overscroll-behavior = [ contain | auto | none ]{1,2}

CSS overscroll-behavior - auto 值

以下示例演示了 overscroll-behavior: auto 的用法，該用法將滾動效果設定為連續。因此，當到達可滾動元素的邊界時，在滾動時，父元素會滾動。

<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: cornsilk;
      height: 800px;
   }

   #box-1 {
      background-color: lightblue;
      overscroll-behavior: auto;
   }

   #main-box > div {
      flex: 1;
      height: 150px;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior Property</h1>
   <p>The box displayed below has overscroll-behavior set as auto, which is the default value.</p>
   <p>Scroll the blue box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p>

   <div id="main-box">
      <div id="box-1">
         <h2>overscroll-behavior: auto</h2>
         <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>

CSS overscroll-behavior - 值比較

以下示例演示了 overscroll-behavior: 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-1 {
      background-color: pink;
   }

   #box-2 {
      background-color: aliceblue;
      overscroll-behavior: contain;
   }
   #main-box > div {
  flex: 1;
  height: 150px;
}
</style>
</head>
<body>
   <h1>overscroll-behavior Property</h1>
   <p>The two boxes displayed below has overscroll-behavior 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-1">
      <h3>overscroll-behavior: auto</p>
      <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-2">
      <h3>overscroll-behavior: contain</p>
      <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>

CSS overscroll-behavior - 兩個關鍵字值

以下示例演示了 overscroll-behavior: auto contain（兩個值）的用法，該用法將 x 軸上的滾動效果設定為 auto，將 y 軸上的滾動效果設定為 contain。因此，當到達可滾動元素的垂直邊界時，在滾動時，父元素不會滾動（因為設定為 contain），但水平邊界設定為 auto，這會導致父元素在 x 軸上滾動。

<html>
<head>
<style>
   #main-box, #box-2 {
      margin: 15px;
      padding: 3px;
      border: solid black 1px;
      overflow: auto;
   }

   #main-box p {
      width: 200%;
   }

   #main-box {
      background-color: rgb(197, 255, 236);
      height: 1300px;
      width: 2000px;
   }

   #box-2 {
      float: left;
      height: 250px;
      width: 30%;
      background-color: rgb(255, 205, 213);
      overscroll-behavior: auto none;
   } 
</style>
</head>
<body>
   <h1>overscroll-behavior - Two value Syntax</h1>
   <p>The two value syntax is used with overscroll-behavior as auto on x axis and none on y-axis.</p>
   
   <div id="main-box">
   
   <div id="box-2">
      <h3>overscroll-behavior: auto none</p>
      <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>

CSS overscroll-behavior - 關聯屬性

下表列出了與 overscroll-behavior 屬性關聯的 CSS 屬性

屬性	描述
overscroll-behavior-x	設定瀏覽器到達滾動區域水平邊界時的行為。
overscroll-behavior-y	設定瀏覽器到達滾動區域垂直邊界時的行為。
overscroll-behavior-block	設定瀏覽器到達滾動區域塊方向邊界時的行為。
overscroll-behavior-inline	設定瀏覽器到達滾動區域內聯方向邊界時的行為。

列印頁面