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 の子要素を調べてください。