JavaScriptの解説

何をしているか簡単に説明すると、id=”off”とid=”on”をそれぞれクリックした時にtouchmoveイベントとwheelイベントを実行したり削除したりしています。

JavaScript
コピー
function noscroll(e){
   e.preventDefault();
}
 
$('#off').on('click', function(){
   document.addEventListener('touchmove', noscroll, {passive: false});
   document.addEventListener('wheel', noscroll, {passive: false});
});
 
$('#on').on('click', function(){
   document.removeEventListener('touchmove', noscroll);
   document.removeEventListener('wheel', noscroll);
});

5行目 | id=”off”をクリックした時

addEventListenerの第一引数でtouchmoveイベントとwheelイベントを登録します。
addEventListenerの第二引数で1行目のnoscroll関数を呼び出しe.preventDefault();でイベントの動作を無効にします。
addEventListenerの第三引数はpassive: false指定してe.preventDefault();が正常に動作するようにしています。

10行目 | id=”on”をクリックした時

removeEventListenerでtouchmoveイベントとwheelイベントを登録を解除しています。