【WordPress】ハンバーガーメニューの全画面モーダルを表示したときに後ろのページをスクロールしないようにする方法

WordPress

2024/9/30

記事内に広告が含まれていることがあります。

WordPressはオリジナルのヘッダーメニュー（グローバルナビゲーション）を作成することができます。

ハンバーガーメニューを作成して、メニューを開いたときに全画面表示させるとデフォルトでは後ろのページのスクロールバーが表示されます。

iPhoneなどデバイスによってはスクロールしたときに一瞬背景のページのコンテンツが表示されることがあります。

ここでは、ハンバーガーメニューを開いたときのみ後ろのページのスクロールをオフにする方法をまとめています。

モーダルの後ろのページのスクロールをオフにする方法
1. コードの解説
キャッシュをクリアする
クラスを指定してスクロールをオフにする方法

モーダルの後ろのページのスクロールをオフにする方法

結論から言うと、メニューが開いているときのみ、bodyタグを取得して overflow: hidden; を設定すればスクロールをオフにすることができます。

チェックボックスにmenu-btnというID名を付けている場合、以下のように記述します。

<script>
  // ハンバーガーメニューのチェックボックスを取得
  const menuCheckbox = document.getElementById('menu-btn');

  // チェックボックスの状態を監視し、スクロールの制御を行う
  menuCheckbox.addEventListener('change', function() {
    if (menuCheckbox.checked) {
      // モーダルが開いたときはスクロールを無効にする
      document.body.style.overflow = 'hidden';
    } else {
      // モーダルが閉じたらスクロールを再び有効にする
      document.body.style.overflow = '';
    }
  });
</script>

コードの解説

チェックボックスの取得

まずはチェックボックスにチェックが入っているかどうかを確認するため、チェックボックスの要素を取得します。

ここでは「getElementById」を使って、「id=”menu-btn”」がついた要素を取得し、変数「menuCheckbox」に格納しています。

const menuCheckbox = document.getElementById('menu-btn');

CSSのつけ外し

addEventListenerのchangeイベントを使って、inputタグのチェックボックスのチェックあり/なしの変化を検知します。

menuCheckbox.addEventListener('change', function() { 変化を検知したときの処理 });

モーダルが開いたとき、つまりチェックがついたらbodyタグにインラインスタイルとして、overflow: hidden; を設定します。

if (menuCheckbox.checked) {
   // モーダルが開いたときはスクロールを無効にする
   document.body.style.overflow = 'hidden';
}

それ以外（チェックが外れたとき）はoverflowの値「hidden」を削除して元の状態に戻します。

else {
  // モーダルが閉じたらスクロールを再び有効にする
  document.body.style.overflow = '';
}

Point

タグに対してインラインスタイルを設定する場合は以下のようにします。

document.タグ名.style.プロパティ名 = '値'

この処理をまとめると以下のようになります。

  // チェックボックスの状態を監視し、スクロールの制御を行う
  menuCheckbox.addEventListener('change', function() {
    if (menuCheckbox.checked) {
      // モーダルが開いたときはスクロールを無効にする
      document.body.style.overflow = 'hidden';
    } else {
      // モーダルが閉じたらスクロールを再び有効にする
      document.body.style.overflow = '';
    }
  });

キャッシュをクリアする

WordPressでJavaScriptの処理を記述するときに、別ファイルとして読み込んでいるJavaScriptファイルを編集した場合はキャッシュのクリアをする必要があります。

「外観 > テーマファイルエディタ」で「common.js」という別ファイルを読み込んでいるとします。

このファイルを編集した場合は、functions.phpで読み込んでいるJavaScriptのバージョンを変更します。（※過去に指定したバージョンではなく、新しいバージョンを指定します）

例えば、wp_enqeue_scriptでバージョンを1.0.0を指定していた場合は、1.0.1に変更します。

function child_enqueue_js() {

	wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common.js', array(), '1.0.1' );  //common.jsを更新したらverを変更
}

add_action( 'wp_footer', 'child_enqueue_js' );

詳細は下記をご参考ください。

クラスを指定してスクロールをオフにする方法

上記の例では、bodyタグを取得して、モーダルが表示されたときにbodyタグにoverflow: hidden; をつけました。

もちろん、bodyタグではなく特定のクラス名のついたタグを取得してスクロールをオフにすることもできます。

その場合は、以下の３つの手順を踏みます。

クラスを指定してスクロールをオフにする方法

タグにクラスをつける（例: class="no-scroll"）
CSSでoverflow: hidden; を設定する
JavaScriptで対象要素のクラスのつけ外しをする

/* モーダルが開いているときにスクロールを無効にする */
.no-scroll {
  overflow: hidden;
}

<script>
  // ハンバーガーメニューのチェックボックスを取得
  const menuCheckbox = document.getElementById('menu-btn');

  // チェックボックスの状態を監視し、スクロールの制御を行う
  menuCheckbox.addEventListener('change', function() {
    if (menuCheckbox.checked) {
      // モーダルが開いたときはスクロールを無効にする
      document.body.classList.add('no-scroll');
    } else {
      // モーダルが閉じたらスクロールを再び有効にする
      document.body.classList.remove('no-scroll');
    }
  });
</script>

特定のタグに対してクラスを付けるときは「classList.add」イベントを使います。クラスを外すときは「classList.remove」を使います。

Point

タグに指定したクラスを付け外しする方法