スクロールスナップとは、画面をスクロールさせた際に各エリアごとにピタッと固定して表示することができるスクロール方法です。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」ほど厳密ではなく、スクロール状況により適切であればスナップさせる感じになります。

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

子要素に設定するscroll-snap-alignプロパティは各エリアのどの位置を基準にスクロールを止めるかを決定するもので、「start」を指定するとエリアの開始位置、「center」を指定するとエリアの中央位置、「end」を指定するとエリアの終了位置に止まるように調整されます。

以上が、CSSだけでスクロールスナップを実装する方法となります。

おすすめの記事