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

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

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




実装

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

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

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

jQueryで'click()'というと、クリックしたときのイベント処理を行うメソッド。 例えば以下のように使います <scr...

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

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

以上、現場からでした。

イチオシ!書籍

シェアしてくだちい

フォローしてくだちい