jQueryでスマホのスクロールイベントを無効化する

  • 121
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

JavaScript

// スクロール禁止
$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});

// スクロール禁止 解除
$(window).off('.noScroll');

使い方の例

メニューが開いているときはスクロールを禁止する。
メニューを閉じたときはスクロール禁止を解除する。

var flag     = false;
var $menu    = $('.menu');
var $menuBtn = $('.menu-btn');

$menuBtn.on('click', function() {

    if (!flag) {
        // スクロール禁止
        $(window).on('touchmove.noScroll', function(e) {
            e.preventDefault();
        });

        // メニューを表示
        $menu.fadeIn(function() {
            flag = true;
        });
    } else {
        // スクロール禁止 解除
        $(window).off('.noScroll');

        // メニューを非表示
        $menu.fadeOut(function() {
            flag = false;
        });
    }

});