2026 年 CSS scrollbar-gutter: stable：靜態 HTML、對話框與 Safari 版面驗收

以 靜態 HTML 交付的行銷頁，至今仍常被一個老問題拖累：當內容變長、頁面開始可捲動時，傳統捲軸會在 inline-end 邊緣吃掉約 12–17 px，置中的主視覺、sticky 導覽列與對話框外殼便會「橫向跳一下」。設計師稱為版面位移，效能團隊在報表裡記成 CLS。到了 2026 年，scrollbar-gutter: stable 提供宣告式解法：瀏覽器即使在不需捲動的短頁也先保留溝槽，之後 overflow 切換時就不會觸發整欄 reflow。本篇面向手寫或 Eleventy、Astro、Hugo 等產物、沒有客戶端路由的站台，說明如何與對話框、sticky 外殼並用，以及為何僅跑 headless 仍難取代 Safari／WebKit 硬體簽核。若你同時在意跨文件的視覺連續性，可一併閱讀 View Transitions 與靜態多頁應用在 Safari 上的實務：兩者解決的痛點不同，但常在同一個釋出週期一起上線。

讀完本文，你會帶走決策矩陣、可貼上的 @supports 範本、對溝槽寬度與 CLS 預算的數字期待，以及一份針對租用 Mac mini 的 Safari 檢查清單。

為何「可捲與否」仍會打亂置中版面

當 overflow-y 在水合後從 visible 變成 auto，或 CMS 預覽突然插入較高的區塊，傳統捲軸出現並橫向佔位。一個最大寬 1200 px、以 margin-inline: auto 置中的文章，相對於使用者第一眼記住的視窗 chrome，可能整體橫移約 15 px。若 sticky 表頭的背景用 100vw 拉滿，文字卻遵守溝槽，視覺上會更突兀：背景仍滿寬，內文卻「歪了一格」。

長年來團隊用 JavaScript 量 window.innerWidth - document.documentElement.clientWidth 補 padding，這類作法與水合競態、縮放後的視埠、以及「捲一下才出現」的覆蓋式捲軸假設都不相容。把政策移進 CSS，可讓建置產物在首次繪製就確定，靜態站台的輸出也更可預測。

2026 年初公開樣板遙測顯示，仍有約 4–7% 的桌面工作階段使用非覆蓋式傳統捲軸——若完全忽略溝槽預留，嚴格 CLS 合約很容易在這批使用者身上爆掉。

設計代號建議新增 --page-gutter-inline，與 scrollbar-gutter 決策對齊，避免元件庫寫死對稱 padding 而與預留車道打架。

RTL 語系要同步檢視邏輯邊與鏡像 padding：溝槽預留改變的是「捲動邊」可用寬度，不是單純把整頁往左推。

行銷與產品常爭論「短落地頁要不要永遠留一條空白」。請用數據說話：比較啟用 stable 後的 CLS 分佈與品牌對「右側留白」的接受度，再寫進設計系統的版面權杖。

scrollbar-gutter 與降級寫法

漸進增強從捲動根開始。多數靜態站應在 html 或 body 擇一套用，避免重複預留：

html {
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; } /* 最後手段：永遠顯示傳統捲軸 */
}

@supports not 分支刻意粗暴：在缺乏 scrollbar-gutter 的引擎上強制 overflow-y: scroll 可穩定預留寬度，代價是短頁也會一直看到捲軸。僅在「CLS 寫進合約、比像素級極簡 chrome 更重要」時採用。

與 overflow-x: hidden 並用時要謹慎：橫向裁切若與行銷注入的寬表格、錨定對話框並存，仍可能在少數組合踩到邊界案例。

靜態 CSS 建議與版面基元放在同一個雜湊 bundle，避免 CDN 分段部署時出現「HTML 已更新、溝槽規則仍舊」的短暫不一致。

若全站有多種「僅內層可捲」的儀表板殼層，請文件化哪一層是捲動根；混用會讓 QA 難以重現使用者截圖。

矩陣：stable、auto 與傳統作法

關鍵字／作法	適用情境	取捨
stable	可捲性會在載入非同步內容後才翻轉的行銷頁	極短頁可能多留一點右側視覺空白
auto	只在 overflow 已確定時才要溝槽	無法避免「第一次繪製後才因內容變長而位移」
JS 寬度補償	舊版企業瀏覽器	縮放、分割視窗、虛擬清單下脆弱

對話框、背景鎖捲與巢狀 overflow

常見模式是在開啟對話框時對 body 設 overflow: hidden，同時在內層保留可捲的條款區。鎖捲時捲軸消失若未與根層溝槽政策一致，置中的對話框外殼可能橫移。請在 CSS 裡先宣告 scrollbar-gutter: stable，再讓腳本切換鎖捲，開合轉場較不會 reflow。

若使用原生 <dialog>，請在 Safari 小版本上驗證 inert 背景與根層溝槽的互動——WebKit 對對話框與捲軸的組合仍持續迭代。

雙欄文件等巢狀捲動面板，建議在內層加 overscroll-behavior: contain，避免橡皮筋捲動與根層預留互相搶事件。

與 position: sticky 行銷列並用時，請在 110% 縮放下測試：sticky 偏移有時會在溝槽生效後重算，若同時有 transform 動畫，可能閃現單幀跳動。

無障礙面向：動態字級放大時，sticky 高度與對話框 safe area 一併檢查，避免「溝槽＋粗捲軸＋大字」疊加後誤觸關閉鈕。

在雲端 Mac mini 上做 Safari QA

Playwright WebKit 能驗證語法解析，卻較難捕捉「覆蓋式捲軸在第一次滾輪事件後才淡入」造成的細微位移。建議在 Apple 晶片 Safari 上為每次釋出預留 20–35 分鐘：穩定版用於合約簽核，Technology Preview 用於對捲軸覆蓋啟發式做二分回歸。

若硬體採購卡住，可在衝刺期租用雲端 Mac mini。MacHTML 的 Apple Silicon 主機常見價位約 每日 16.9 美元，含 SSH 推送靜態 bundle 與 VNC 並排對照生產端 Safari 設定——相較隔夜寄送借測機，時間成本通常更划算。

請鏡像生產環境的 color-scheme、若有自訂 ::-webkit-scrollbar 主題、以及字型堆疊；自訂捲軸樣式會改變對溝槽寬度的假設。

以 120 fps 慢動作錄影開關對話框，單幀背景下沉與 modal 外殼不一致時，有影像比口頭爭辯更快收斂。

維運上可把 CDN 快取鍵與含 scrollbar-gutter 的 CSS 雜湊綁定，降低分段部署造成 HTML 與版型權杖不同步的機率。

最後提醒：雲端主機時鐘與本機筆電不同步時，偶發影響的是快取過期與 Service Worker 更新策略，與捲軸無直接關係，但仍建議在 QA 清單勾「時間同步」以免誤判。

CLS 預算與遙測

不少行銷 SLA 將桌面 LCP 頁的 CLS 上限壓在 0.05。主動預留溝槽的累積位移，通常低於事後用 JavaScript 補 padding 的抖動。

請從 RUM 匯出「水平位移像素」直方圖；路由切換後若常出現大於 8 px 的尖峰，多半是可捲狀態切換卻沒有溝槽政策。

當 modal 開啟事件與同工作階段 CLS 惡化超過 0.02 相關時，常見原因是鎖捲移除了捲軸卻未補償寬度——請回頭檢查鎖捲與 gutter 的順序。

每季可人工抽樣 30 筆最長、對話框最多的工作階段；自動分桶仍可能把「覆蓋捲軸淡入」誤標成圖片位移。

把 Lighthouse 與 WebPageTest 追蹤與 Safari 螢幕錄影共用同一個工作階段 ID，稽核軌跡會好整理得多。

靜態管線釋出檢查表

1. 先用 body 上的 data-attribute 在 staging 開關，直到視覺 diff 通過。
2. 在 Playwright 斷言比較注入高區塊前後 hero 的 bounding box x 偏移，超過 6 px 即告警。
3. 文件化各語系釋出順序；RTL 需鏡像 padding 代號與溝槽並存。
4. 封存追蹤與 Safari 螢幕截圖，使用相同工作階段 ID 以利事後對照。

常見問題

scrollbar-gutter 能完全取代 overflow-y: scroll 的 hack 嗎？

對現代 evergreen 目標大多可以；仍建議保留 @supports not 作為舊環境逃生口。

stable 會不會浪費極短落地頁的空間？

會略微留白；請與「永遠顯示捲軸」方案比較 CLS 與品牌接受度後決策。

和 100vw 背景有衝突嗎？

有。與文字欄綁定的背景優先使用邏輯寬度權杖，避免生吞原始視埠單位。

Apple Silicon Mac mini 仍是釐清 WebKit 捲軸行為最快的方式：原生覆蓋啟發式、長時間錄影的熱管理，以及 macOS 無障礙開關都是 Linux 虛擬機難以完整模擬的。MacHTML 提供含 SSH／VNC 的雲端 Mac mini 租用，讓靜態站團隊能在不新增資本支出的前提下驗證 scrollbar-gutter、對話框與 sticky 外殼——需要時開機驗收，綠燈後再關機即可。