なぜ背景がスクロールしてしまうのか
モーダルは前面に重なる要素ですが、その背後にあるページ本体はそのまま操作可能な状態のままです。何も対策をしないと、モーダル内をスクロールしきった後の指の動きが背後のページに伝わり、裏側が動いてしまいます。
この現象は「スクロールの突き抜け」とも呼ばれます。デスクトップでは目立たなくても、タッチ操作のスマホでは慣性スクロールの影響で顕著に出ます。
bodyを固定する基本的な対処
もっとも基本的な対策は、モーダルを開いている間だけbody要素のスクロールを止めることです。overflowを隠す指定をbodyに付与し、閉じたら元に戻すのが定番の流れです。
ただしoverflowを隠すだけだと、スクロールバーが消える分だけ横幅が変わり、レイアウトが一瞬ガクッと動くことがあります。スクロールバーの幅を補うパディングを足すと、この揺れを防げます。
症状別チェック表
モーダル表示中に背景がスクロールしてしまうは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
スマホでの位置ジャンプを防ぐ
モバイルではoverflowを隠すだけでは突き抜けが止まらない場合があります。bodyの位置を固定する方式に切り替えると確実ですが、固定した瞬間にページ先頭へ戻ってしまう副作用が出ます。
これを防ぐには、モーダルを開く前のスクロール位置を記録しておき、固定を解除するときにその位置へ戻す処理を組み合わせます。開閉の前後で表示位置が変わらないように設計することが、違和感のない体験につながります。
実装の手順
順を追って実装すると抜け漏れを防げます。
- モーダルを開く直前に現在のスクロール位置を記録する
- bodyを固定し、記録した位置を打ち消す指定で見た目を保つ
- スクロールバー幅ぶんのパディングを補ってレイアウトの揺れを防ぐ
- モーダル内側だけはスクロール可能にする
- 閉じるときに固定を解除し、記録しておいた位置へ戻す
スマホ実機共有で挙動を確認する
背景スクロール抜けはOSやブラウザ、機種ごとに挙動が異なり、PCのシミュレーションだけでは再現しないことがあります。実機での確認が欠かせません。
ギガサイト便にモーダル実装入りのHTMLをドロップすれば共有URLが発行され、QRコードを読み取って手元のスマホですぐ開けます。修正版は同じURLのまま差し替えられるので、複数の端末で開閉挙動を確かめながら調整を進められます。
よくある質問
PCでは問題ないのにスマホだけ背景が動きます。
タッチ操作の慣性スクロールでスクロールの突き抜けが起きやすいためです。overflowを隠すだけでなく、bodyの位置を固定する方式に切り替えると改善します。
bodyを固定したらページ先頭に戻ってしまいます。
位置固定の副作用です。開く前のスクロール位置を記録し、固定時にその分を打ち消す指定をして、閉じるときに元の位置へ戻す処理を加えてください。
モーダルを開くと横にガクッとずれます。
スクロールバーが消えることで表示幅が変わるのが原因です。スクロールバー幅ぶんのパディングをbodyに補うと揺れを抑えられます。
実機がなくても確認できますか。
シミュレーションでは再現しない挙動があるため実機確認を推奨します。共有URLをQRコードで手元のスマホに開けば、複数機種での確認が手軽になります。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。