LoginSignup
135
132

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-04-22

JavaScript

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

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

使い方の例

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

const $window  = $(window);
const $menu    = $('.menu');
const $menuBtn = $('.menu-btn');
let openFlag   = false;

$menuBtn.on('click', () => {

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

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

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

});
135
132
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
135
132