スクロールを禁止するjavascriptを紹介します。
グローバルメニューやモーダル展開時にスクロールを禁止し、メニューが閉じられたら禁止を解除するといった処理を実装することが出来ます。
コード
//イベント処理禁止用
function noScroll(e) {
e.preventDefault();
}
//スクロール禁止イベント追加
function addDisableScrollEvent(){
document.addEventListener('touchmove', noScroll, { passive: false });
document.addEventListener('wheel', noScroll, { passive: false });
}
//スクロール禁止イベント削除
function removeDisableScrollEvent(){
document.removeEventListener('touchmove', noScroll);
document.removeEventListener('wheel', noScroll);
}document.addEventListener()で'touchmove'と'wheel'イベントに対してスクロール禁止処理を加える、または禁止解除をするといった処理で実装します。
デモ
ボタンを押すことでスクロール禁止、禁止解除設定をします。
See the Pen Untitled by yoshi (@mikanbako) on CodePen.
