【JS】1回のスクロールで1セクション進む

1回のスクロールで1セクション進む実装をしてみました

https://codepen.io/mdvlzqqm-the-lessful/pen/VwOpNqp

CSSの実装

• htmlとbodyに高さ100％を指定してover-flow: hidden;を設定
  htmlとbodyの高さが常にビューポートの高さに一致させます。この設定で、ページにコンテンツがどれだけ少なくても、要素がビューポート全体を覆うことになります。
  over-flow: hidden;で、通常のスクロールバーを無効にします。
• sectionに高さ100vhを指定
  1つのセクションが1画面に収まるようにします。

JSの実装

• ページが読み込まれたときに、すべての<section>要素を取得します。
• currentSection変数に現在のセクションのインデックスを保持します。
• scrollToSection関数は指定されたインデックスのセクションにスムーズにスクロールします。
• wheelイベントリスナーを使用して、スクロール方向（上または下）に応じてcurrentSectionを増減して、対応するセクションにスクロールします。
• isScrollingでスクロール中かどうかを監視します。この設定をしなかった場合、1回のスクロールで最後の席ションまで進んでしまいました。調べたところ、マウスホイールのスクロールイベントが高速に複数回発生してしまうことがあるようです。それを防ぐためにsetTimeoutをつかって1秒後にisScrollingを解除するようにしています。