モーダルの後ろをスクロールさせない方法

Modalの後ろをスクロールさせないにするにはどうすればいいですか？

モーダルの後ろをスクロールさせない方法

モーダルウィンドウは、ユーザーに特定のアクションを促したり、重要な情報を表示したりする際に非常に便利なツールです。しかし、モーダルが開いているときに背景がスクロールできてしまうと、ユーザーエクスペリエンスを損なう可能性があります。この記事では、モーダルの後ろをスクロールさせないようにする方法について解説します。

overflow: hidden; を使う

モーダルウィンドウが開かれたときに、body要素に `overflow: hidden;` を設定することで、背景のスクロールを無効にすることができます。

HTML の例


<html>
<head>
  <style>
    body.modal-open {
      overflow: hidden; 
    }
  </style>
</head>
<body>
  <div class="modal">
    <!-- モーダルのコンテンツ -->
  </div>

  <script>
    // モーダルを開く処理
    const modal = document.querySelector('.modal');
    modal.addEventListener('click', () => {
      document.body.classList.add('modal-open');
    });

    // モーダルを閉じる処理
    // ...
  </script>
</body>
</html>

上記の例では、モーダルが開かれたときに `modal-open` クラスを body に追加し、`overflow: hidden;` を適用しています。

注意点

* モーダルを閉じる際には、`overflow: hidden;` を解除する必要があります。 * モバイルデバイスでは、`overflow: hidden;` が期待通りに動作しない場合があります。

その他の方法

`overflow: hidden;` 以外にも、モーダルの後ろをスクロールさせないようにする方法があります。

方法	説明
モーダル内にスクロールエリアを設ける	モーダルのコンテンツが多い場合は、モーダル内にスクロールエリアを設けることで、背景をスクロールさせずにコンテンツを表示できます。
JavaScriptライブラリを使用する	モーダルを実装するためのJavaScriptライブラリの中には、背景のスクロールを無効にする機能を備えているものがあります。

## 参考資料 * [MDN Web Docs: overflow](https://developer.mozilla.org/ja/docs/Web/CSS/overflow) ## よくある質問 ### Q1: `overflow: hidden;` を設定しても背景がスクロールしてしまう場合は？ A1: モバイルデバイスでは、`overflow: hidden;` が期待通りに動作しない場合があります。その場合は、JavaScriptでスクロールを無効にするなどの対策が必要です。 ### Q2: モーダル内にスクロールエリアを設ける場合、どのように実装すれば良いですか？ A2: モーダル内のコンテンツを固定の高さを持つ要素で囲み、その要素に `overflow-y: auto;` を設定します。 ### Q3: モーダルを実装するためのJavaScriptライブラリには、どのようなものがありますか？ A3: 代表的なものとして、Bootstrap Modal, Materialize Modal, SweetAlert2 などがあります。

その他の参考記事:jquery スクロール位置