overscroll-behavior-inline

Baseline 已廣泛支援

此功能已成熟，並可在多種裝置和瀏覽器版本上執行。自 2022 年 9 月起，所有瀏覽器都已支援此功能。

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

有關完整說明，請參閱 overscroll-behavior。

語法

css

/* Keyword values */
overscroll-behavior-inline: auto; /* default */
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;

/* Global values */
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: revert;
overscroll-behavior-inline: revert-layer;
overscroll-behavior-inline: unset;

overscroll-behavior-inline 屬性透過從以下值列表中選擇一個關鍵字來指定。

值

auto: 預設的滾動溢位行為正常發生。
contain: 在此值設定的元素內部，會觀察到預設的滾動溢位行為（例如，“彈跳”效果）。但是，在相鄰的滾動區域上不會發生滾動鏈；底層元素不會滾動。contain 值會停用原生的瀏覽器導航，包括垂直的下拉重新整理手勢和水平滑動導航。
none: 鄰近的滾動區域不會發生滾動連結，並且會阻止預設的滾動溢位行為。

正式定義

初始值	`auto`
應用於	非替換塊級元素和非替換行內塊元素
繼承性	否
計算值	同指定值
動畫型別	離散

正式語法

overscroll-behavior-inline = 
  contain  |
  none     |
  auto

示例

阻止內聯方向的過量滾動

在此演示中，我們有兩個塊級盒子，一個在另一個裡面。外層盒子設定了較大的 width，因此頁面會水平滾動。內層盒子設定了較小的寬度（和 height），因此它舒適地位於視口內，但其內容被賦予了較大的寬度，因此它也會水平滾動。

預設情況下，當內層盒子滾動並達到滾動邊界時，整個頁面將開始滾動，這可能不是我們想要的結果。為了避免在內聯方向發生這種情況，我們在內層盒子上設定了 overscroll-behavior-inline: contain。

HTML

html

<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>

CSS

css

main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

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

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

p {
  padding: 10px;
  background-color: rgb(255 0 0 / 50%);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

結果

規範

規範
CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者在 2025 年 8 月 9 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題