題目與場景
頁面使用 overflow: auto，操作前沒有溢出，操作後出現經典捲軸。捲軸會佔用視窗內聯方向的空間，置中內容因此改變位置。請說明 CSS 方案、適用邊界、回退與量化驗證。
面試官考察什麼
- 是否理解
scrollbar-gutter作用於捲動盒，而且屬性不會繼承。 - 能否區分經典捲軸與覆蓋式捲軸，並解釋
stable與both-edges。 - 是否知道根元素、
body與巢狀捲動容器的作用域差異。 - 能否把彈窗鎖定捲動、RTL、舊瀏覽器與 CLS 監測放進完整方案。
先問哪些釐清問題
確認跳動發生在視窗還是內部捲動容器，作業系統是否使用覆蓋式捲軸，頁面是否需要 RTL，彈窗是否透過鎖定頁面捲動實現，以及目標瀏覽器與無障礙要求。也要確認版面必須保持對稱，還是只要避免捲軸出現時內容往一側移動。
30 秒回答框架
我會先在實際捲動盒使用 scrollbar-gutter: stable，讓經典捲軸出現前後預留同一側空間；需要對稱置中時使用 stable both-edges。視窗場景配置根元素，內部清單則在自己的捲動盒配置。覆蓋式捲軸通常不佔空間，所以沒有可預留的固定寬度。彈窗鎖定捲動、RTL 與舊瀏覽器保留回退路徑，最後用版面位移觀測與真實裝置矩陣驗證。
深入拆解
- 確認捲動盒。 根元素控制視窗；
body的宣告不會自動取代根元素。內部面板若獨立捲動，必須在面板設定屬性。 - 選擇值。
stable為經典捲軸預留內聯方向空間；both-edges再在另一側增加等寬空間，適合需要保持幾何置中的版面。 - 理解覆蓋式捲軸。 覆蓋式捲軸疊在內容上，通常不消耗版面空間；使用者代理與作業系統決定捲軸模式，CSS 不能強制轉成經典模式。
- 處理彈窗。 讓彈窗開啟時的捲動鎖定與關閉時的恢復使用同一狀態機，避免額外手寫
padding-right與瀏覽器預留空間疊加。彈窗內部捲動區獨立配置。 - 相容與 RTL。 現代瀏覽器支援後直接使用邏輯內聯邊緣；舊環境保留最小化回退，並按方向、捲軸位置與安全區檢查視覺結果。
- 量化效果。 使用
layout-shift效能條目記錄位移，區分使用者輸入前後的 CLS，結合實驗室長清單、彈窗與慢網路情境以及真實使用者 p75 資料。CLS 的良好目標是 p75 不超過 0.1。
高品質示例回答
我會把宣告放在真正擁有捲動的盒子上：
html {
scrollbar-gutter: stable both-edges;
}
.results-pane {
overflow: auto;
scrollbar-gutter: stable;
}stable 讓經典捲軸的預留空間在沒有溢出時也存在；both-edges 讓視窗兩側保持對稱。若系統使用覆蓋式捲軸，捲軸本來就不佔版面空間，因此不能把此屬性當成固定寬度方案。開啟彈窗時我不會再無條件追加捲軸寬度補償，而是讓頁面鎖定邏輯與 gutter 策略協同；彈窗內部捲動區獨立配置。
我會檢查根元素與 body 的實際效果、巢狀捲動容器、RTL、關閉彈窗後的恢復、舊瀏覽器回退與減少動態偏好。驗證同時收集 layout-shift 條目與現場 p75 CLS，目標是 p75 CLS 不超過 0.1。MDN 與 W3C 規範用於屬性語義，web.dev 用於 CLS 診斷。
常見錯誤
- 把
scrollbar-gutter寫在普通父容器上，卻沒有確認哪個元素真的捲動。 - 認為
body的宣告必然控制視窗，忽略根元素與瀏覽器特殊處理。 - 在覆蓋式捲軸上承諾固定的像素佔位。
stable與手寫padding-right同時啟用，彈窗開啟後出現雙重空白。- 只在無 RTL、單一作業系統的截圖中驗收，沒有測量 CLS 或內部捲動面板。
追問與回答
為什麼需要 both-edges？
單側 stable 只預留捲軸所在的內聯邊緣。內容區若以視窗中心對齊，另一側也增加等寬 gutter 才能保持左右幾何對稱；最後仍應在 RTL 與不同捲軸位置上實測。
scrollbar-gutter 能解決彈窗鎖定捲動的所有問題嗎？
不能。它處理捲動盒的版面預留，不負責焦點陷阱、背景互動、捲動位置恢復或彈窗層級。鎖定狀態機仍需獨立驗證，並避免與手寫寬度補償重複。
如何測試覆蓋式與經典捲軸？
在至少一套經典捲軸環境和一套覆蓋式捲軸環境中，分別測試無溢出、出現溢出、開關彈窗、內部面板捲動、RTL 與縮放。記錄關鍵元素的幾何位置與 layout-shift 條目，而不只依賴肉眼截圖。