CSS - overscroll-behavior-x 屬性

CSS 屬性 `overscroll-behavior-x` 確定瀏覽器在到達滾動區域水平邊界時執行的操作。

您可以參考`overscroll-behavior` 獲取詳細資訊。

可能的值

CSS 屬性 `overscroll-behavior-x` 定義為以下關鍵字之一。

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

應用於

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

語法

overscroll-behavior-x = contain | auto | none

CSS overscroll-behavior-x - contain 值

下面的示例演示了 `overscroll-behavior-x: contain` 的用法，它將水平滾動效果設定為包含且非連續的。

<html>
<head>
<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-x: 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-x Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-x</b> defines the horizontal 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-x - auto 值

下面的示例演示了 `overscroll-behavior-x: auto` 的用法，它將滾動效果設定為預設值，瀏覽器會在到達應用該元素的邊界時決定是否滾動父元素。

<html>
<head>
<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-x: auto;
   }

   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-x Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-x: auto</b> defines the horizontal scrolling area behavior.
         The value auto behaves like the normal scrolling behavior. It is the default value.
         </p>
      </div>
      </div>
   </main>
</body>
</html>

列印頁面