jQuery メニューを開いているときはbodyのスクロールを禁止する

スマホのハンバーガーメニューとかでメニューが開いているとき、bodyがスクロールするのが嫌な人が多いらしいので、スクロールできないようにする。

よく実装する割にややこしいので、実装方法をメモ。

実装

$(function () {
  /*
  * Menu SP
  */
  var flag = false;
  $('.header-sp__menu a').on('click', function () {
    if (flag == false) {
      bodyFix(); // bodyを固定させる関数

      // その他、ナビを開くときに起きるあれこれを記述

      flag = true;
    } else {
      closeNavi();
      flag = false;
    }
  });
});

//ナビを閉じるときの関数
function closeNavi() {
  bodyFixReset(); // body固定を解除する関数

  // その他、ナビを閉じるときに起きるあれこれを記述

}

//以下、bodyを固定する関数
function bodyFix() {
  const scrollPosi = $(window).scrollTop();
  $('body').css({
    'position': 'fixed',
    'width': '100%',
    'z-index': '1',
    'top': -scrollPosi
  });
}

//以下、body固定を解除する関数
function bodyFixReset() {
  const scrollPosi = $('body').offset().top;
  $('body').css({
    'position': 'relative',
    'width': 'auto',
    'top': 'auto'
  });
  //scroll位置を調整
  $('html, body').scrollTop(-scrollPosi);
}

bodyを固定する記述、bodyの固定を解除する記述をそれぞれ関数にして、メニューを開くボタンを押したとき、メニューを閉じるボタンを押したときにそれぞれ実行されるようにしています。

メニューを閉じるときの処理は、いろんなボタンで行われる可能性があるので、使いまわせるように関数化。

以前、以下の記事でflagを使わずにclickイベントを交互に制御する方法を書いたのですが、

jQuery clickするごとに交互に処理を行う関数を作ってしまう

例えば「ハンバーガーメニューをタップするとメニューが開き、閉じるときはメニュー内の”閉じるボタン”をクリックする」のように、別のボタン間で開閉を制御してやる必要がある場合は使えないので、素直にflagを使ってます。

メニューの開閉、意外とややこしいよね。

以上、現場からでした。