---
title: "モーダル表示中に背景がスクロールしてしまうときの対処"
description: "モーダルやハンバーガーメニューを開くと背後のコンテンツがスクロールしてしまうと困っているモバイル開発者向け。body固定・スクロール位置の保持・iOS特有の挙動への対処をまとめた記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/modal-scroll-behind-mobile"
markdown: "https://giga-site.com/articles/modal-scroll-behind-mobile/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# モーダル表示中に背景がスクロールしてしまうときの対処

モーダルやハンバーガーメニューを開いたとき、背後のコンテンツがスクロールしてしまう「背景スクロール抜け」はモバイルで特に起きやすい問題です。bodyを固定する基本に加え、スクロール位置の保持やiOS特有の挙動への対処が必要になります。

> Source HTML: https://giga-site.com/articles/modal-scroll-behind-mobile
> Article index: https://giga-site.com/articles/index.md

## なぜ背景がスクロールしてしまうのか

モーダルは前面に重なる要素ですが、その背後にあるページ本体はそのまま操作可能な状態のままです。何も対策をしないと、モーダル内をスクロールしきった後の指の動きが背後のページに伝わり、裏側が動いてしまいます。

この現象は「スクロールの突き抜け」とも呼ばれます。デスクトップでは目立たなくても、タッチ操作のスマホでは慣性スクロールの影響で顕著に出ます。

## bodyを固定する基本的な対処

もっとも基本的な対策は、モーダルを開いている間だけbody要素のスクロールを止めることです。overflowを隠す指定をbodyに付与し、閉じたら元に戻すのが定番の流れです。

ただしoverflowを隠すだけだと、スクロールバーが消える分だけ横幅が変わり、レイアウトが一瞬ガクッと動くことがあります。スクロールバーの幅を補うパディングを足すと、この揺れを防げます。

## 症状別チェック表

モーダル表示中に背景がスクロールしてしまうは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## スマホでの位置ジャンプを防ぐ

モバイルではoverflowを隠すだけでは突き抜けが止まらない場合があります。bodyの位置を固定する方式に切り替えると確実ですが、固定した瞬間にページ先頭へ戻ってしまう副作用が出ます。

これを防ぐには、モーダルを開く前のスクロール位置を記録しておき、固定を解除するときにその位置へ戻す処理を組み合わせます。開閉の前後で表示位置が変わらないように設計することが、違和感のない体験につながります。

## 実装の手順

順を追って実装すると抜け漏れを防げます。

1. モーダルを開く直前に現在のスクロール位置を記録する
2. bodyを固定し、記録した位置を打ち消す指定で見た目を保つ
3. スクロールバー幅ぶんのパディングを補ってレイアウトの揺れを防ぐ
4. モーダル内側だけはスクロール可能にする
5. 閉じるときに固定を解除し、記録しておいた位置へ戻す

## スマホ実機共有で挙動を確認する

背景スクロール抜けはOSやブラウザ、機種ごとに挙動が異なり、PCのシミュレーションだけでは再現しないことがあります。実機での確認が欠かせません。

ギガサイト便にモーダル実装入りのHTMLをドロップすれば共有URLが発行され、QRコードを読み取って手元のスマホですぐ開けます。修正版は同じURLのまま差し替えられるので、複数の端末で開閉挙動を確かめながら調整を進められます。

## よくある質問

### PCでは問題ないのにスマホだけ背景が動きます。

タッチ操作の慣性スクロールでスクロールの突き抜けが起きやすいためです。overflowを隠すだけでなく、bodyの位置を固定する方式に切り替えると改善します。

### bodyを固定したらページ先頭に戻ってしまいます。

位置固定の副作用です。開く前のスクロール位置を記録し、固定時にその分を打ち消す指定をして、閉じるときに元の位置へ戻す処理を加えてください。

### モーダルを開くと横にガクッとずれます。

スクロールバーが消えることで表示幅が変わるのが原因です。スクロールバー幅ぶんのパディングをbodyに補うと揺れを抑えられます。

### 実機がなくても確認できますか。

シミュレーションでは再現しない挙動があるため実機確認を推奨します。共有URLをQRコードで手元のスマホに開けば、複数機種での確認が手軽になります。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [意図しない横スクロールが出るときの原因と対処](https://giga-site.com/articles/horizontal-scroll-bug/index.md)
- [ページ内リンクでスクロール位置がずれるときの対処](https://giga-site.com/articles/scroll-position-not-restored/index.md)
- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)
- [スマホでホバーが効かないときの対処](https://giga-site.com/articles/hover-not-working-mobile/index.md)
- [スマホでズームできない・勝手にズームするときの対処](https://giga-site.com/articles/mobile-zoom-issue/index.md)
- [スマホで全体が極端に小さく表示されるときの対処（viewport設定）](https://giga-site.com/articles/viewport-meta-missing-mobile-tiny/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "モーダル表示中に背景がスクロールしてしまうときの対処",
  "description": "モーダルやハンバーガーメニューを開くと背後のコンテンツがスクロールしてしまうと困っているモバイル開発者向け。body固定・スクロール位置の保持・iOS特有の挙動への対処をまとめた記事です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/modal-scroll-behind-mobile",
  "url": "https://giga-site.com/articles/modal-scroll-behind-mobile",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "PCでは問題ないのにスマホだけ背景が動きます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "タッチ操作の慣性スクロールでスクロールの突き抜けが起きやすいためです。overflowを隠すだけでなく、bodyの位置を固定する方式に切り替えると改善します。"
      }
    },
    {
      "@type": "Question",
      "name": "bodyを固定したらページ先頭に戻ってしまいます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "位置固定の副作用です。開く前のスクロール位置を記録し、固定時にその分を打ち消す指定をして、閉じるときに元の位置へ戻す処理を加えてください。"
      }
    },
    {
      "@type": "Question",
      "name": "モーダルを開くと横にガクッとずれます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "スクロールバーが消えることで表示幅が変わるのが原因です。スクロールバー幅ぶんのパディングをbodyに補うと揺れを抑えられます。"
      }
    },
    {
      "@type": "Question",
      "name": "実機がなくても確認できますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "シミュレーションでは再現しない挙動があるため実機確認を推奨します。共有URLをQRコードで手元のスマホに開けば、複数機種での確認が手軽になります。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```