SublimeなLife日記

少しでも素晴らしい生活をおくるために、日々、気になったことを。

drawer.jsのスクロールがおかしくなっているのを直す対処法

jQueryライブラリ「drawer.js」のスクロールがおかしくなった

レスポンシブでドロワーメニューを作るときは、何も考えずに「Drawer」を突っ込んでいました。
今年(2018年)に入ったあたりから、iPhone実機でメニューを出して下の方にスクロールさせたときの挙動がおかしくなっているのに気が付きました。
上にスワイプすると、Drawerメニューが意図せず閉じてしまうのです。
iOSのアップデートの関係でしょうか。わかりませんが。
これをとりあえず直しました。

Drawerのメニューを出すハンバーガーボタンを押したときに、html,body要素にclassを出し入れするようにします。
ハンバーガーボタンを押してDrawerメニューが出ているときのみ、html,bodyにクラスを付与するわけです。
ここでは.fixedとしました。

$(document).on("click", ".drawer-toggle", function() {
  $('html, body').toggleClass('fixed');
});

次に、cssの記述です。

.fixed {
    overflow: auto;
    height: 100%;
}

思考の過程は忘れましたが、これでおかしかったDrawerのハンバーガーメニューのスクロールが治りました。
聡明な方は記述を見れば意味がわかると思うので、説明は省きます。

直した翌週に、別のサイトの改修のついでにDrawerも直そうと思って早くもやり方を忘れてしまっていた自分を恥じ、投稿しました。
どなたかのお役に立てば幸いです。

git.blivesta.com