モバイル用フッター固定メニューの設定方法
last

ハンバーガーメニューのスクロール時に背後がスクロールされる。メニュー部分のみスクロールさせるには?

ハンバーガーメニューのスクロール時に後ろのBODYタグの中身がスクロールされる場合があるのですが、メニュー部分のみスクロールさせることはできますか?

コメントへの回答
サルワカくん
2017/10/29

JavaScriptを使う必要があります。
はじめに、お手数ですが、下記記事の手順でJavaScriptsファイルを準備します。
https://saruwakakun.com/sango/use-js

次にscripts.jsの中に下記のJSを追加します。


//スマホメニューの背景をスクロールさせない
$(function() {
  $('#drawer__input').click(function() {
    if ( $('#drawer__input').prop('checked') == false ) {
      $('body').css('overflow','auto');
    } else {
      $('body').css('overflow','hidden');
    }
  });
});

これでメニュー部分のみスクロールされるようになります。

アリス
2018/01/27

いつもお世話になっております。
上記コメントにあるlast様の
”ハンバーガーメニューのスクロール時に後ろのBODYタグの中身がスクロールされる場合があるのですが、メニュー部分のみスクロールさせることはできますか?”
に対しての回答を実行させていただいたのですが、開いたメニューが下まで行ききった後もスクロールすると、奥のコンテンツ(記事部分)がスクロールされてしまいます(上方向スクロールも同様の現象が起きます)。これは、あくまでメニューにまだ先がある場合にのみ、奥のコンテンツがスクロールしなくなるというCSSなのでしょうか? 
長文失礼いたしました。

アリス
2018/01/28

申し訳ありません。なんとか解決できました。「filezila」ではないソフトを使っていたため、ソフト内でjsファイルの作成ができず、他のjsファイルをコピー→サクラエディタで開き、CSSを入力→完成したjsファイルをアプロード という流れで行ったのですが、ワードプレスのテーマ編集からscripts.jsをみたところ、空白になっておりました。大変失礼しました。

サルワカくん
2018/01/28

ご返信ができておらず失礼しました。
解決したとのこと、安心しました。