今回はJavascriptを使ってスクロール禁止の処理を実装してみたいと思います！

一応、「overflow: hidden」や「touch-action: none」を使えばCSSのみでもスクロール禁止は出来ます。
ただし、どちらもSafariで上手くいかないので注意が必要です。
（IEとSafariは滅んでほしい）

Javascriptを使えば、どのブラウザにも対応できるので、こちらの方がオススメです！
ちなみに、スクロール禁止処理はjQueryでは実装できないので注意してください。

まずは完成コードから！

(function() {
   // スクロールを禁止する関数
   function noScroll(event) {
     event.preventDefault();
   }
  // スクロール禁止(SP)
  document.addEventListener('touchmove', noScroll, { passive: false });
  // スクロール禁止(PC)

  document.addEventListener('mousewheel', noScroll, { passive: false });
  // スクロール禁止を解除(SP)
  document.removeEventListener('touchmove', noScroll, { passive: false });
  // スクロール禁止を解除(PC)
  document.removeEventListener('mousewheel', noScroll, { passive: false });
})();

コードを解説

デモページを用意したので、こっちも合わせて見れば理解度が深まると思います！

// スクロールを禁止する関数
function noScroll(event) {
  event.preventDefault();
}

noScroll関数では、スクロールを禁止させるために「preventDefault()」を指定してあげます。
「preventDefault()」はブラウザ側で用意されているイベントをブロックするという性質があります。

今回の処理では、スクロール処理（touchmoveとmousewheel）をブロックします。

// スクロール禁止(SP)
document.addEventListener('touchmove', noScroll, { passive: false });
// スクロール禁止(PC)
document.addEventListener('mousewheel', noScroll, { passive: false });

ここのイベントハンドラでは、「touchmove」と「mousewheel」のイベントを先ほどのnoScroll関数を使ってブロックしています。

これでタッチした時とマウスホイールした時のスクロールを無効にできます。

「addEventListener」の第3引数に「{ passive: false }」を指定しているのが分かると思います。
passiveがtrueになっていると「preventDefault」が使えなくなります。
デフォルトではtrueになっているので明示的にfalseにしてあげます。
※【wheel】【mousewheel】【touchstart】【touchmove】のみ

passiveはスクロール処理のパフォーマンスを上げるためのシステムです。
jQueryでは、このpassiveを制御できないので、Javascriptオンリーで実装する必要があります。

// スクロール禁止を解除(SP)
document.removeEventListener('touchmove', noScroll, { passive: false });
// スクロール禁止を解除(PC)
document.removeEventListener('mousewheel', noScroll, { passive: false });

最後は、スクロール禁止の解除です。

「removeEventListener」を使えば簡単に解除することが出来ます。

が、

注意しなければならないのが２点あるので確認していきましょう。

• 引数に渡すときは無名関数は使えない
• スクロール禁止時と同じようにpassiveをfalseに指定

イベントハンドラを使うときは、よく無名関数を使っていると思います。
しかし、イベントを削除するには追加したときの関数を指定する必要があります。

なので、追加するときも削除するときも名前が付いている関数を使ってあげましょう！！

スクロール禁止の処理は以上になります。

CSSを使う方法（おまけ）

最後におまけとして、CSSを使ってスクロールを解除する方法を２つ紹介します！

冒頭にも書いた通り、Safariで動作しないので注意してください〜

overflowを使う方法

body {
overflow: hidden;
}

これだけで、スクロール禁止を実装することができるのです！
めちゃめちゃカンタンですねｗｗ

イメージとしてはwindowに対して「overflow: hidden」することでwindowの外にある要素を切ってしまう感じですね！

実際使うときは、

.no-scroll {
overflow: hidden;
}

を作ってあげて、スクロール禁止したいタイミングで「body」タグに、このクラスを付けてあげればOKです。

touch-actionを使う方法

body {
touch-action: none;
}

先ほどの「overflow: hidden」と基本的には一緒です。

少し違うのが、touch-actionを使うとピンチイン・ピンチアウトも禁止されることです。

どちらを使ってもOKですが、ピンチイン・ピンチアウトを禁止する必要は無いので「overflow」を使う方がオススメです！