【コピペ実装!!】スマホのメニュー展開時にスクロール禁止させる方法

スマホのメニュー展開時にコンテンツ部分がスクロールしてしまう。

スマホのメニューはアコーディオンであったり、横スライドメニューであったり、様々ですが、ボタンを押すと展開するタイプが多いですね。

その際にフリックするとコンテンツ部分がスクロールできてしまって困ることありますよね。

そんなときはコンテンツ部分となるbodyタグを固定して動かないようにしましょう！

下記のコードをコピペで実装!!

cssファイルにコピペ

.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

jsファイルにコピペ

$(function(){
  var state = false;
  var scrollpos;
 
  $('.toggle').on('click', function(){
    if(state == false) {
      scrollpos = $(window).scrollTop();
      $('body').addClass('fixed').css({'top': -scrollpos});
      $('.menu').addClass('open');
      state = true;
    } else {
      $('body').removeClass('fixed').css({'top': 0});
      window.scrollTo( 0 , scrollpos );
      $('.menu').removeClass('open');
      state = false;
    }
  });
 
});

この場合、

• メニューのボタンのクラスが.toggle(上記の5行目)
• メニューの本体部分のulが.menu(上記の9行目・14行目)

であると想定していますので、ご自分の環境に合わせて変更してください。