ポップアップモーダルが開いている間にバックグラウンドのスクロールを無効にする方法

1. CSSを使用してオーバーフローを制御する方法: HTMLのbody要素に対して、overflowプロパティを設定してスクロールを無効にします。そして、ポップアップモーダルが開かれた時にこのスタイルを適用します。

   <style>
    body.modal-open {
      overflow: hidden;
    }
   </style>

   JavaScriptでポップアップモーダルを開くときに、body要素にmodal-openクラスを追加し、閉じるときに削除します。

   // ポップアップモーダルを開く
   function openModal() {
    document.body.classList.add('modal-open');
    // 他のポップアップモーダルの設定
   }
   // ポップアップモーダルを閉じる
   function closeModal() {
    document.body.classList.remove('modal-open');
    // 他のポップアップモーダルの設定
   }

2. JavaScriptを使用してスクロールを無効にする方法: JavaScriptを使って、ポップアップモーダルが開いている間にスクロールイベントをキャンセルします。

   // ポップアップモーダルを開く
   function openModal() {
    // バックグラウンドのスクロールを無効化
    document.addEventListener('scroll', disableScroll);
    // 他のポップアップモーダルの設定
   }
   // ポップアップモーダルを閉じる
   function closeModal() {
    // バックグラウンドのスクロールを有効化
    document.removeEventListener('scroll', disableScroll);
    // 他のポップアップモーダルの設定
   }
   // スクロールイベントをキャンセルする関数
   function disableScroll(event) {
    event.preventDefault();
    event.stopPropagation();
   }

これらの方法を使用すると、ポップアップモーダルが開いている間にバックグラウンドのスクロールを無効にすることができます。選択した方法をポップアップモーダルのコードに組み込んでください。