画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！

↑私が10年以上利用している会計ソフト！

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

See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen.

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

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

See the Pen scroll-snap-type: y by Mana (@manabox) on CodePen.

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

See the Pen scroll-snap-type: x by Mana (@manabox) on CodePen.

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

See the Pen scroll-snap-type: both by Mana (@manabox) on CodePen.

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

スクロールの調整位置

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

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

厳密に位置を調整 mandatory

See the Pen scroll-snap-type: mandatory by Mana (@manabox) on CodePen.

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

See the Pen scroll-snap-type: proximity by Mana (@manabox) on CodePen.

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

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

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

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

エリアの開始位置 start

See the Pen scroll-snap-align: start by Mana (@manabox) on CodePen.

エリアの終わりの位置 end

See the Pen scroll-snap-align: end by Mana (@manabox) on CodePen.

エリアの中央 center

See the Pen scroll-snap-align: center by Mana (@manabox) on CodePen.

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