ハンバーガーを開いた時に背景を固定する方法

スマホサイトでよく見るのがハンバーガーメニュー。ハンバーガーをクリックすると、メニューがドロップダウンして出てくるものや、横からスライドして出てくるものなど様々です。

しかし、ハンバーガーが開いている間にスクロールすると、背景も一緒に動いてしまうサイトが少なくありません。背景はスクロールする必要がないですし、ユーザーが迷ってしまう原因にもなるので、固定したいところです。

ハンバーガーが開いている間に背景を固定するには、

$('html').css('overflow','hidden').on('touchmove.noScroll', function(e) {
e.preventDefault(); });

上記のように書けばうまくいきます。

htmlをoverflow:hiddenにすれば、背景がスクロールされなくなると思っていましたが、なぜかiPhoneではスクロールされてしまったので、touchmove.noScrollを書き、タッチ動作のうちスクロールを禁止することで、iPhoneでも背景がスクロールされないようになりました。

スクロールできないようにしてもメニューを閉じた後は、スクロールできないといけません。

$('html').css('overflow','').off('.noScroll');

上記のように書くと元に戻すことができます。
css(‘overflow’,”)でoverflowを元の値に戻し、off(‘.noScroll’)で先程設定したtouchmove.noScrollを解除しています。