發布日期：2026 年 9 月 4 日
「單軸捲動容器」功能會擴充 CSS overflow 屬性，支援可捲動的值 (auto、scroll、hidden) 與 clip 結合 (例如 overflow: scroll clip)，產生單一軸向的捲動容器。
這項變更可解鎖許多人要求的功能，例如依軸心固定的定位，但也會在其他捲動相關功能中產生額外的副作用。由於存在這些潛在的相容性風險，我們要求開發人員在穩定版管道推出這項功能前，先測試網站並提供意見回饋。
這項功能已在 Beta 版、開發人員版和 Canary 版的 Chrome 153 中推出，供開發人員測試。如要瞭解這些版本，請參閱這篇文章。你不需要開啟任何旗標。
在單一軸上設定溢位時的怪異行為
如果沒有這項功能，就無法使用 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 錯誤。