【javaScript】でスクロールを禁止にする（PC、スマホ対応）

2019年5月15日2019年7月18日JavaScript

前回、cssでPCでのスクロール禁止にする方法を紹介しました。（PCでのみスクロール禁止可能）

そこで今回は、スマホでもスクロール（タッチ操作）禁止にする方法を紹介します。

スマホの場合は、cssではなくjavaScriptでの実装が必要です。

以下のソースのno_scroll()を初期化処理などで呼び出せば、PC、スマホでスクロールができなくなります。

スクロール禁止を解除したい場合は「return_scroll()」を呼び出せばOKです。

[index.js]

// スクロール禁止
function no_scroll() {
    // PCでのスクロール禁止
    document.addEventListener("mousewheel", scroll_control, { passive: false });
    // スマホでのタッチ操作でのスクロール禁止
    document.addEventListener("touchmove", scroll_control, { passive: false });
}
// スクロール禁止解除
function return_scroll() {
    // PCでのスクロール禁止解除
    document.removeEventListener("mousewheel", scroll_control, { passive: false });
    // スマホでのタッチ操作でのスクロール禁止解除
    document.removeEventListener('touchmove', scroll_control, { passive: false });
}

// スクロール関連メソッド
function scroll_control(event) {
    event.preventDefault();
}