134
131

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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;
        });
    }

});
134
131
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
134
131

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?