# 【初心者】スクロール操作無効をVanilla JSで制作【備忘録】

はじめに

投稿時点で、筆者は知識ゼロの状態から勉強を初めて3ヶ月程度の実力です。
そのため、理解不足や説明不足、誤った内容や呼び方をしている可能性があります。
万が一参考にする場合は上記の点を考慮した上でご一読ください。
説明文の内容はChatGPT先生からの引用も多いです。

制作過程

スクロール無効を実装しようと思った理由は、ハンバーガーメニューオープン中はスクロールができないようにしたかったこと。

一番簡単だったのが、CSSと合わせて実装すること。
JSでクラス付与してbodyに、 overflow: hidden; を加える。

const body = document.body;

button.addEventListener('click', () => {
    button.classList.toggle('is-open'); // メニュー開閉用
    body.classList.toggle('is-noScroll'); // クラス付与してスクロールができないようにする場合
  });

body.is-noScroll {
 overflow: hidden;
}

これで実装できたが、PC表示だとハンバーガーボタンを押すたびにスクロールバーが表示・非表示を繰り返すのが気になった。
なのでCSSに頼らずJSのみで実装する手段を考えて、結果的に下記になりました。

let isMenuOpened = true; // メニュー開閉状態のフラグ
// スクロール操作のイベント定義、preventDefault() メソッドはイベントの既定の動作をキャンセルするために使用される
const handle = (event) => {
 event.preventDefault();
};

// スクロール操作の記述
if (isMenuOpened) { // フラグの状態を見て実行動作を判断
 document.addEventListener('touchmove', handle, { passive: false }); // タッチ操作でのスクロール無効化
 document.addEventListener('mousewheel', handle, { passive: false }); // マウスホイール操作でのスクロール無効化
 } else {
  document.removeEventListener('touchmove', handle); // タッチ操作でのスクロール有効化
  document.removeEventListener('mousewheel', handle); // マウスホイール操作でのスクロール有効化
}
isMenuOpened = !isMenuOpened; // isMenuOpenedの値を反転させる

これをボタンクリック部分に入れることで実装できました。
欠点としては、PC表示時にスクロールバーが消えるわけではないので、スクロールバーを直接操作してスクロールをすることはできてしまうという点。
だけどユーザーがそういう使い方をすることはないからいいのかな？
もしくはスクロール検知したらハンバガーメニュー閉じるようにするのもアリかなと思った。