JSで全画面スクロールを実装したい

Question

初めての質問になります、宜しくお願い致します。

現在１画面ずつスクロールするサイトを、Jqueryなどのプラグインを使用せずにJSで記述しようとしています。
作成にあたって以下のサイトの記載を参考に作成を進めているのですがJSの記述でいくつかわからない部分があり、その点に関して質問をさせていただければと思います。

参考サイト
・(https://mukuchi.work/wheelpage/）
参考サイトで紹介のデモページ
・(https://mukuchi.work/demos/wheelPage/)　

以下デモページで使用しているHTML・CSSになります。

<div id="wrap">
  <div class="page1">1</div>
  <div class="page2">2</div>
  <div class="page3">3</div>
  <div class="page4">4</div>
  <div class="page5">5</div>
</div>

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#wrap div {
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  font-size: 30px;
}
.page1 { background-color: aqua; }
.page2 { background-color: antiquewhite; }
.page3 { background-color: tomato; }
.page4 { background-color: palegreen; }
.page5 { background-color: orange; }

上記HTML・CSSについては問題なく理解ができているのですが、
次に記載しますJSでいくつか理解できていない部分があります、、

(function () {
  'use strict';
  
  // 変数
  var wrap = document.getElementById('wrap'),
    elements = document.querySelectorAll('#wrap div'), // 1画面分スクロールさせる要素
    elRect = [], // 要素の位置情報を取得するための配列
    elTop = [], // 要素の位置を入れるための配列
    count = 0, // 
    wheelFlag = false;
  
  // 各要素の位置を取得
  function getElTop() {
    for (var i = 0; i < elements.length; i++) { // 要素の数ループ
      elRect.push(elements[i].getBoundingClientRect()); // 要素の位置情報を配列へ
    }
    for (var i = 0; i < elRect.length; i++) { // 要素の数ループ
      elTop.push(elRect[i].top + window.scrollY); // 要素の位置を配列へ
    }
  }
  getElTop();
  
  // 画面リサイズのときの処理
  window.addEventListener('resize', function () {
    elRect = []; // 位置情報の配列を一旦空に
    elTop = []; // 位置の配列を一旦空に
    getElTop(); // 位置を取得
    window.scrollTo(0, elTop[count]); // 現在表示中の画面位置へ
  });
  // マウスホイールのときの処理
  wrap.addEventListener('wheel', function (e) {
    e.preventDefault(); // デフォルトのスクロール動作を削除
    if (!wheelFlag) { // wheelFlagがfalseのときに発動
      wheelFlag = true; // wheelFlagをtrueにして無駄に発動しないように
      if (e.deltaY > 0) { // ホイールが下方向だったら
        if (count >= elements.length - 1) { // 要素の数以上に増えないようにcountが要素の数を超えたら
          count = elements.length - 1; // countを要素の数とする
        } else {
          count++; // それまではcountをプラス
        }
      } else if (e.deltaY < 0) { // ホイールが上方向だったら
        if (count <= 0) { // 0より小さくならないようにcountが0以下なら
          count = 0; // countを0とする
        } else {
          count--; // それまではcountをマイナスしていく
        }
      }
      setTimeout(function () { //0.8秒後にwheelFlagをfalseにして次のページめくれるように
        wheelFlag = false;
      },800);
      setTimeout(function () {
        window.scrollTo({ // count番目の要素へスクロール
          top: elTop[count],
          behavior: 'smooth',
        });
      },20); // スクロールまで時間差をつけて慣性スクロール対策
    }
  });
}());

質問させていただきたい内容

・変数「count」について
まず冒頭にて変数の定義をしている箇所に、
coount = 0;
という記載があるのですが、このcountという変数は一体何を指しているのでしょうか。
上記のコード内にいくつかconsole.log(count)と記述し値をとってみたところ、スクロールで画面が切り替わるたびに値が0-4の範囲で動くことが確認できました。そのため全５ページに割り振られた値なのかなと考えたのですが、冒頭以外でcountに何かの値を入れるような記述が見当たらず混乱していますT_T

・変数「wheelFlag」について
冒頭でfalseと設定しているwheelFlagですが、以下のようにtrueに変更する理由がよくわからず、、
これは「マウスホイールのときの処理」の発火の条件がwheelFlag=falseとなっているため、trueに変更しておけば
発火しなくなからということなのでしょうか、、？
ただ一度trueに設定してしまうと以降のマウスホイール時にはwheelFlagがtrueのままのため処理が行えなくなってしまうのではと思い、、

    if (!wheelFlag) { // wheelFlagがfalseのときに発動
      wheelFlag = true; // wheelFlagをtrueにして無駄に発動しないように

初めての質問のため、質問の仕方等不十分なところもあるかと思いますが、
何卒よろしくお願い致します。

Answer 1

・変数「count」について

countという変数は一体何を指しているのでしょうか

現在の表示しているスライドの番号です。下にスクロールすれば値が一つプラスされ、上にスクロールすれば一つマイナスされます。そして存在しているスライド以上または以下（この場合だと0~4以外）の数にならないように以下で調整されています。

 if (e.deltaY > 0) { // ホイールが下方向だったら
    if (count >= elements.length - 1) { // 要素の数以上に増えないようにcountが要素の数を超えたら
      count = elements.length - 1; // countを要素の数とする
    } else {
      count++; // それまではcountをプラス
    }
  } else if (e.deltaY < 0) { // ホイールが上方向だったら
    if (count <= 0) { // 0より小さくならないようにcountが0以下なら
      count = 0; // countを0とする
    } else {
      count--; // それまではcountをマイナスしていく
    }
  }

そしてホイール後のスライドの番号を入れることでそこまでスクロールさせています。
elTop[count]にはcount番目の要素のページ上部からの高さが入っています。

setTimeout(function () {
  window.scrollTo({ // count番目の要素へスクロール
    top: elTop[count],  
    behavior: 'smooth',
  });
},20);

・変数「wheelFlag」について

ただ一度trueに設定してしまうと以降のマウスホイール時にはwheelFlagがtrueのままのため処理が行えなくなってしまうのではと思い、、

いえいえちゃんとスクロール0.8秒後にfalseになるよう設定されています。この変数を設ける理由は、これがないと一度に何枚もスクロールできてしまうからです。それでは全画面スクロールの意味がないですから、一枚スクロールしたら0.8秒間は次のスライドにスクロールできないようにしているのです。

setTimeout(function () { //0.8秒後にwheelFlagをfalseにして次のページめくれるように
  wheelFlag = false;
},800);

Comments

[ShotaKarato]

わかりやすく解説いただきありがとうございます！！
並行して考えていた部分に、上記回答いただいた内容確認してやっと理解することができましたTT
ベストアンサーとさせていただきます！