發布日期：2026 年 9 月 4 日
「單軸捲動容器」功能會擴充 CSS overflow 屬性，支援與 clip 結合的捲動值 (auto、scroll、hidden)，例如 overflow: scroll clip，產生單一軸的捲動容器。
這項變更可解鎖許多使用者要求的功能，例如依軸設定固定位置，但也會在其他捲動相關功能中產生額外的副作用。為避免發生相容性問題，我們要求開發人員在穩定版推出這項功能前，先測試網站並提供意見回饋。
這項功能已在 Beta 版、開發人員版和 Canary 版的 Chrome 154 發布版本中推出，供開發人員測試。不必開啟任何旗標。
在單一軸上設定溢位的怪異之處
如果沒有這項功能，就無法使用 CSS 建立真正的單軸捲動容器。如果您設定一個軸捲動，同時嘗試讓另一個軸保持可見 (例如設定 overflow-x: scroll 並保留 overflow-y: visible)，瀏覽器的樣式引擎會自動強制可見軸計算為 auto (或 scroll)。即使您無意這麼做，系統也會建立二維捲動器。
如果嘗試建立含有固定頂端列和固定第一欄的表格，這個問題就會非常明顯。在下列範例中，目標是讓第一欄黏在水平捲動的 .table-wrapper 上，並讓頂端列黏在文件的捲軸上。
<div class="table-wrapper" style="overflow-x: auto;">
<table>
…
</table>
</div>
/* Scroll horizontally */
.table-wrapper {
overflow-x: auto;
}
/* Sticky top row */
.table-wrapper thead {
position: sticky;
top: 0;
}
/* Sticky first column */
.table-wrapper td:first-child {
position: sticky;
left: 0;
}
如果您試試看，會發現這項功能無法運作。這是因為先前說明的溢位問題：.table-wrapper 實際上會變成二維捲軸。因此，當 position: sticky 尋找每個軸的最接近祖系捲軸時，結果在兩種情況下都是 .table-wrapper 元素。
現場示範
示範影片
單軸捲動容器可修正這項問題
使用單一軸捲動容器時，您可以透過 clip 明確禁止次要軸成為捲動器。這樣一來，position: sticky 就能獨立追蹤兩個不同的捲動容器。
如要修正表格範例，請將水平捲動與 overflow-y: clip 配對。
.table-wrapper {
overflow-x: auto;
overflow-y: clip;
}
或者，使用 overflow 簡寫：
.table-wrapper {
overflow: auto clip;
}
這樣一來，.table-wrapper 就只會做為 x 軸的捲動容器。現在，固定頂端列會略過該列，並正確固定在文件 Y 軸的捲動器上，而第一欄則會繼續水平固定在 .table-wrapper。
如果您在支援的瀏覽器中查看這篇文章，可以透過下列示範瞭解實際運作情形：
現場示範
示範影片
受影響的行為
由於單軸捲動容器會改變捲動環境的評估和建立方式，您可能會發現其他依賴捲動容器的功能也出現變化，例如：
position: sticky：如圖所示，元素現在會正確地停留在單軸捲動容器中，改善受單一軸上overflow: clip限制的元素行為。overscroll-behavior：由於元素現在只能在單一軸上做為捲動容器，overscroll-behavior可能不會再觸發遭裁剪的軸，進而影響自訂的「下拉更新」或彈跳效果。這項行為變更與 Firefox 和 Safari 相同。- 以程式輔助方式捲動：在單一軸捲動容器上呼叫捲動 API (例如
Element.scrollTo()) 時，系統現在會強制執行以程式輔助方式捲動的限制。元素會拒絕沿著定義為剪輯的軸以程式輔助方式捲動。 - 格線和彈性最小儲存格大小：對於格線和彈性版面配置中的捲動容器，系統通常會忽略預設最小大小 (
min-width: auto)，讓儲存格自行調整為可用空間的大小。在相同軸上設定overflow: clip時，預設的最小尺寸會開始生效，可能會導致彈性或格線容器變大。
特徵偵測
如要偵測單軸捲動容器的支援情形，請使用 single-axis-scroll-container 關鍵字查詢 @supports named-feature() 規則。
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
如 CSSWG 問題 #13677 所述，建議使用 named-feature(single-axis-scroll-container) 偵測這項功能，因為單獨使用 @supports (overflow: scroll clip) 檢查只會剖析，不會偵測瀏覽器是否正確處理修訂後的單軸捲動行為。
在 JavaScript 中，請使用 CSS.supports("named-feature(single-axis-scroll-container)") 執行這項檢查。
歡迎提供意見回饋
為評估潛在的相容性風險，我們已在 190 個網站上進行測試。根據這項分析，這些變更似乎不會造成重大中斷。
不過，由於單軸捲動容器會從根本上改變捲動內容的評估方式，因此系統會進行更廣泛的搜尋。請在非穩定版 Chrome 管道測試網站和網路應用程式，協助找出任何極端情況，確保這項功能在穩定版推出前一切正常。
如果發生問題，或遇到非預期的捲動行為，請提出 Chromium 錯誤報告。