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