scroll-snapでスクロール毎にセクションの切り替わるページを実装する

以前にscroll-snapを使用する記事を投稿しましたが、scroll-snapを使ってスクロール毎にセクションの切り替わるページを実装してみます。

サンプルコード

HTMLは以下の通りです。
ヘッダーは追従する仕様で実装しますが、不要であれば外してください。

<header class="header">
  <nav class="nav">
    <ul>
      <li><a href="#sectionA">セクションA</a></li>
      <li><a href="#sectionB">セクションB</a></li>
      <li><a href="#sectionC">セクションC</a></li>
      <li><a href="#sectionD">セクションD</a></li>
    </ul>
  </nav>
</header>

<main class="contents">
  <section id="sectionA" class="section">
    <h1>セクションA</h1>
  </section>
  <section id="sectionB" class="section">
    <h2>セクションB</h2>
  </section>
  <section id="sectionC" class="section">
    <h2>セクションC</h2>
  </section>
  <section id="sectionD" class="section">
    <h2>セクションD</h2>
  </section>
</main>

次にCSSです。
.contentsにscroll-snap-type、その中の各セクションにscroll-snap-alignを設定します。
CSSは必要な部分のみの抜粋になるので、全体のCSSはデモページをご確認ください。

:root {
  --header-height: 50px;
}
body {
  overflow: hidden;
}
.header {
  height: var(--header-height);
}
.contents {
  height: calc(100dvh - var(--header-height));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: calc(100dvh - var(--header-height));
}

scroll-snap以外のポイントとしては、コンテンツやセクションの高さを100dvhからヘッダーの高さを除いた値を設定している点になります。
ページのスクロールをscroll-snapで制御するデモページ