CSS overflow: auto clip 怎麼用？單軸捲動與 sticky 邊界

先分清楚三種 overflow 意圖#

這不是把內容「藏起來」的視覺技巧，而是把 scrollability 寫進 layout contract。你要先決定哪一個軸真的可以被使用者操作，再選擇 CSS。

水平卡片用 auto clip#

先建立不依賴特定框架的 HTML：

1
<section class="board" aria-labelledby="board-title">
2
  <h2 id="board-title" class="board__title">功能總覽</h2>
3
  <div class="board__track">
4
    <article class="card">第一張卡片</article>
5
    <article class="card">第二張卡片</article>
6
    <article class="card">第三張卡片</article>
7
  </div>
8
</section>

如果是整個 board 負責水平捲動，最小配置可以是：

1
.board {
2
  overflow: auto clip;
3
  overscroll-behavior-inline: contain;
4
}
5

6
.board__track {
7
  display: flex;
8
  gap: 1rem;
9
  inline-size: max-content;
10
  min-inline-size: 100%;
11
}
12

13
.card {
14
  flex: 0 0 min(80vw, 24rem);
15
}

overflow shorthand 在常見的水平 LTR 寫法中，第一個值對應 x 軸、第二個值對應 y 軸；auto clip 因此代表 x 可捲動、y 裁切。若元件需要支援不同 writing mode，請把這段意圖改寫成 overflow-inline: auto 與 overflow-block: clip，並實際檢查瀏覽器對 logical properties 的支援。

如果內容只應該在 x 軸移動，也可以把物理軸寫得更直白：

1
.board {
2
  overflow-x: auto;
3
  overflow-y: clip;
4
}

這種寫法適合先表達設計意圖，但不能跳過 @supports 與 fallback 測試；新舊瀏覽器對「一軸 scrollable、另一軸 clip」的處理可能不同。

為什麼它能幫 sticky 少走錯路#

position: sticky 不是固定在 viewport；它會受祖先的 scroll container、inset 與可用空間限制。當外層只因為 overflow: auto 意外建立 y 軸 scroll container，sticky header 可能就跟著錯誤的祖先計算。

一個簡化的 header 範例：

1
.board__title {
2
  position: sticky;
3
  inset-block-start: 0;
4
  z-index: 1;
5
  background: Canvas;
6
}

auto clip 的價值，是讓 layout 明確表示某一軸只能裁切，瀏覽器才有機會把 sticky 的不同軸邊界分開計算。但它不會自動修好所有 sticky 問題；仍要檢查祖先是否有 transform、contain、額外的 overflow、固定高度與 stacking context。

排錯時先在 DevTools 逐層暫時移除 overflow，再確認是哪一個祖先在目標軸真的可捲動。不要只把 z-index 調大，因為那通常解不了錯誤的 scroll ancestor。

scroll-axis-lock 適合另一種互動#

瀏覽器常會把觸控捲動手勢鎖到主要移動軸，避免使用者想左右滑時不小心上下漂移。CSS Overflow Level 5 的 scroll-axis-lock 允許作者在需要「斜向也能持續捲動」的 scroll container 上關閉這個鎖定：

1
.map-or-zoomed-image {
2
  scroll-axis-lock: none;
3
}

這比較適合地圖、放大圖片或需要同時操作兩軸的畫布，不是一般水平 carousel 的預設值。普通卡片列通常應保留軸向鎖定，讓觸控操作更容易預期。

Feature detection 與 fallback#

不要只以 user agent 判斷；用 CSS capability check，並準備視覺與互動都可接受的 fallback：

1
.board {
2
  overflow-x: auto;
3
  overflow-y: hidden;
4
}
5

6
@supports (overflow: auto clip) {
7
  .board {
8
    overflow: auto clip;
9
  }
10
}
11

12
@supports (scroll-axis-lock: none) {
13
  .map-or-zoomed-image {
14
    scroll-axis-lock: none;
15
  }
16
}

fallback 使用 hidden 時，語意不等同於 clip；它可能仍參與 scroll container 計算。因此 fallback 的目標是讓舊瀏覽器能操作，而不是假裝兩種行為完全一樣。若 sticky 是核心需求，請在 fallback browser 上單獨驗收 header 邊界。

上線前的四組測試#

1. 滑鼠與觸控：水平拖曳不會把頁面垂直位置帶走；需要雙軸的地圖仍能斜向操作。
2. 鍵盤：focus 進入卡片後，Tab、方向鍵與可見 focus ring 都能到達被裁切內容。
3. sticky：在短內容、長內容、巢狀 overflow、縮放與不同 viewport 高度逐一檢查。
4. 支援矩陣：至少測試 stable browser、Chrome 153 對應的實驗 channel、iOS／Android 觸控與沒有新語法的 fallback。

如果元件還需要 snap、marker 或按鈕導覽，可以接著看 CSS Scroll Marker 建立可存取輪播導覽；不要把實驗中的 marker API 與單軸 overflow 當成同一個功能。

參考資料：

Chrome for Developers：Chrome 153 release notes

W3C CSS Overflow Module Level 5：Scroll Axis Locking

MDN：CSS overflow carousels