使用 CSS 隱藏或停用捲動

請依需求選擇 CSS：裁切內容、完全阻止捲動，或只隱藏捲軸。overflow: hidden 會裁切溢出內容並移除可見捲軸；這不只是外觀上的變更。

選擇適合的 CSS 規則

overflow 簡寫屬性控制水平與垂直溢出。只有在刻意裁切內容時才使用 hidden。只有在區域仍可捲動且使用者能察覺時才使用 scrollbar-width: none。修正造成溢出的元素後，再把 overflow-x 當作最後的保護措施。

停用捲動並裁切溢出

限制元件大小，只設定需要的軸。一般捲軸會消失，框外內容會被裁切。

<div class="preview-panel"><p>Visible text.</p><p>Extra text is clipped.</p></div>

.preview-panel { max-block-size: 8rem; overflow-y: hidden; border: 1px solid #777; padding: 1rem; }

結果沒有垂直捲軸，底邊以外的文字也不可見。只有在裁切內容不重要，或有其他控制項可以顯示它時才這樣做。對話框可用暫時類別阻止 html 和 body 捲動，但要測試滑鼠、觸控、鍵盤與關閉操作。

隱藏捲軸但保留捲動

若讀者仍需存取所有內容，請保留 overflow-y: auto，使用標準屬性與範圍明確的回退規則隱藏捲軸。

.scroll-area { max-block-size: 10rem; overflow-y: auto; }
@supports (scrollbar-width: none) { .scroll-area { scrollbar-width: none; } }
@supports not (scrollbar-width: none) { .scroll-area::-webkit-scrollbar { display: none; } }

區域仍可透過滾輪、觸控、鍵盤或觸控板捲動。::-webkit-scrollbar 並非標準。隱藏捲軸可能讓捲動方式不明顯，因此應提供可見提示或替代控制項。

防止水平溢出

水平捲軸通常表示版面有問題，例如固定寬度媒體、無法縮小的 flex 項目或無法斷行的字串。先修正原因。

.page-content { max-inline-size: 100%; overflow-x: hidden; }
.page-content img, .page-content video { display: block; max-inline-size: 100%; block-size: auto; }
.page-content code { overflow-wrap: anywhere; }

overflow-x: hidden 只是最後的裁切保護，不能取代響應式尺寸。overflow-x: clip 也會阻止程式捲動，不應包住鍵盤使用者需要操作的內容。

不要混淆 overscroll-behavior

overscroll-behavior: contain 控制可捲動對話框到邊緣時的捲動鏈。它不會隱藏捲軸，也不會停用捲動。

無障礙與瀏覽器注意事項

不要在沒有清楚替代方式時隱藏重要文字、導覽、欄位或控制項。檢查鍵盤焦點：Tab 不應到達無法顯示的被裁切內容。overflow: hidden 仍可能顯示取得焦點或由指令碼捲動到的內容，但 clip 不會。scrollbar-gutter: stable 只預留空間，不會隱藏或停用捲動。測試窄寬視窗、滾輪、觸控、Page Down、方向鍵、Tab，以及靠近邊緣的焦點元素。

發佈前，請在窄與寬的檢視區測試一般與受限狀態。關閉對話框後必須還原頁面的捲動，對話框本身的內容也必須仍可存取。不要用裁切掩蓋問題；應檢查過大的圖片、很長的 URL、預先格式化的程式碼，以及 flex 或 grid 子元素。