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も直そうと思って早くもやり方を忘れてしまっていた自分を恥じ、投稿しました。
どなたかのお役に立てば幸いです。