表示領域にピタッと移動！CSSでスクロールスナップを実装しよう

スクロールスナップの基本

スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう：

HTML

ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。

<div class="container">
  <section class="area">1</section>
  <section class="area">2</section>
  <section class="area">3</section>
  <section class="area">4</section>
  <section class="area">5</section>
</div>

CSS

スクロールスナップさせるために最低限必要なプロパティーは以下のとおり。高さを 100vh にすることで画面領域いっぱいに広げて、フルスクリーンレイアウトとして表示できます。

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

上記デモはこのような設定で表現できました！JavaScript も使わず便利ですね！

それでは各プロパティーについてひとつずつ解説します。

どの軸でスクロールさせるか

scroll-snap-type プロパティーではスクロール位置を調整する軸を決定します。値を y にすれば縦方向に、 x にすれば横方向にスクロールさせ、ピタッと止める位置を調整します。また、both にすれば縦にも横にも調整可能です。

縦方向にスクロール scroll-snap-type: y

横方向にスクロール scroll-snap-type: x

縦・横 両方向にスクロール scroll-snap-type: both

scroll-snap-type: both とCSS グリッドのマルチレイアウトを組み合わせると、面白い効果が生まれますね！

スクロールの調整位置

scroll-snap-type プロパティーで、スクロールの方向に続いてどの程度厳密に位置調整を行うかも設定できます。mandatory だと現在表示しているエリアか、次のエリア、どちらか一方のみ表示されます。proximity だとピタッと固定される位置に近ければそちらに、そうでなければスクロール位置の調整は行われず、中間地点で止まります。

ちょっと文章での説明はわかりづらいですね w 実際にデモを見て、動作を比較してみてください。

厳密に位置を調整 mandatory

中間地点にいる場合はその位置で停止 proximity

mandatory の方がピタッと感が強いですね！

親要素のどの位置でピタッと停止させるか

scroll-snap-align プロパティーは子要素に記述します。エリアのどの位置をベースラインとしてピタッと停止させるかが指定できます。start とすればエリアの開始位置を、end では終わりの位置を、center では中央を位置するように調整されます。

デモではわかりやすいよう、各エリアの高さを 70vh にしています。

エリアの開始位置 start

エリアの終わりの位置 end

エリアの中央 center

スクロールスナップを使えばフルスクリーンレイアウトや画像ギャラリーも作りやすいですね！むやみに使うべきではないと思いますが、適したレイアウトや挙動を実現するために、覚えておくといいでしょう。