CSS - overscroll-behavior-inline 屬性

CSS 屬性 overscroll-behavior-inline 用於確定當滾動區域的內聯方向邊界已到達時瀏覽器的行為。

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

可能的值

CSS 屬性 overscroll-behavior-inline 定義為以下列表中的關鍵字。

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

應用於

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

語法

overscroll-behavior-inline =  contain | auto | none

CSS overscroll-behavior-inline - contain 值

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

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<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-inline: 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-inline Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) 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-inline - auto 值

以下示例演示了 overscroll-behavior-inline: auto 的用法，它將水平滾動效果設定為像鏈條一樣連續的。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
   main {
      height: 500px;
      width: 5000px;
      background-color: rgb(220, 200, 100);
   }

   main > div {
      height: 300px;
      width: 500px;
      overflow: auto;
      position: relative;
      top: 100px;
      left: 100px;
      overscroll-behavior-inline: auto;
   }

   div > div {
      height: 100%;
      width: 1500px;
      background-color: lightgoldenrodyellow;
   }

   p {
      padding: 10px;
      background-color: rgba(100, 100, 100, 0.2);
      margin: 0;
      width: 300px;
      position: relative;
      top: 10%;
      left: 2%;
   }
</style>
</head>
<body>
   <h1>overscroll-behavior-inline: auto Property</h1>
   <main>
      <div>
      <div>
         <p>
         <b>overscroll-behavior-inline</b> defines the horizontal scrolling (inline) area behavior.
         The value auto sets the parent element getting scrolled after the inline boundary of the scrollable element has been raeched. 
         Thus giving the scrolling chain experience.
         </p>
      </div>
      </div>
   </main>
</body>
</html>

列印頁面