表示領域にピタッと固定！CSSで作るスクロールスナップ

スクロールスナップとは、画面をスクロールさせた際に各エリアごとにピタッと固定して表示することができるスクロール方法です。Javascriptなどでスクロール位置を取得してこのような動きを制御することがありますが、スクリプトを使わなくてもCSSだけで簡単に実装することができます。

スクロールスナップの実装方法

CSSでスクロールスナップを実装するには、scroll-snapプロパティを使うことで実現できます。

.area-wrap {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
  height: 100vh;
}

<div class="area-wrap">
  <section class="area">Area1</section>
  <section class="area">Area2</section>
  <section class="area">Area3</section>
  <section class="area">Area4</section>
  <section class="area">Area5</section>
</div>

親要素に「scroll-snap-type」、子要素に「scroll-snap-align」を指定するだけで簡単にスクロールスナップを作ることができます。そして、高さを「100vh」とすることで各エリアを画面いっぱいに広げて表示させ、セクションごとに切り替わるようにします。高さを「100％」としても良いですが、その場合はhtml要素やbody要素に対しても高さを100％指定をしないとうまく動かないことがあります。

scroll-snap-typeプロパティについて

親要素に設定するscroll-snap-typeプロパティは縦軸か横軸かを決定するもので、「y」の値を指定すれば縦方向にスクロールし、「x」の値を指定すれば横方向にスクロールして止める位置を調整します。
「mandatory」という値を指定することで、スクロールを停止する度に厳密にスナップさせることができます。他にも「proximity」という値があり、こちらは「mandatory」ほど厳密ではなく、スクロール状況により適切であればスナップさせる感じになります。