WEBTODESIGN

【純JavaScript】iOSもクリア！スクロールを禁止にする

スクロールを一時的に禁止したい場合。さまざまな方法がありますが、JavaScriptの使用が便利で使いやすいと感じます。

例えば、ローディング中やメニューを開いてる間は禁止したいとか。意外と使いたい場面は多いです。

コード全体

以下のコードを追加し、
禁止したい場面でcantScroll()、許可したい場面でcanScroll（）を実行するだけです。

///// スクロールの制御 /////
const scrollPrevent = e => {
    e.preventDefault();
}
// 禁止
const cantScroll = () => {
    document.addEventListener('wheel', scrollPrevent, { passive: false });
    document.addEventListener('touchmove', scrollPrevent, { passive: false });
}
// 許可
const canScroll = () => {
    document.removeEventListener('wheel', scrollPrevent, { passive: false });
    document.removeEventListener('touchmove', scrollPrevent, { passive: false });
}
cantScroll();// スクロール禁止
canScroll();// スクロール許可

wheelがPC用、touchmoveはタッチデバイス用です。

RECOMMENDATION

NEWEST