スクロールスナップとは | バイブコーダーのための名称辞典

スクロールスナップとは

スクロールを離すと、途中で止まらずにセクションの区切りへピタッと吸い付くように止まる CSS の技法。

概要

CSS の scroll-snap-type を使って、スクロール中に指を離す（マウスを止める）と、中途半端な位置ではなく決められた区切りにピタッと止まるようにする技法です。親要素に scroll-snap-type、区切りたい各要素に scroll-snap-align を指定するだけで実装でき、フルスクリーンのセクションを 1 枚ずつめくるような見せ方によく使われます。

別名

表記ゆれ：スクロールスナップ、scroll-snap、ページ単位スクロール

AI への伝え方

「スクロールすると各セクションがピタッと止まるようにして」で伝わります。縦方向・横方向のどちらにスナップさせたいか（y か x か）、途中で止まれない mandatory にするか、緩やかに止まる proximity にするかを伝えると仕様がぶれません。

似たパーツとの違い

「スムーススクロール」はスクロールの移動をなめらかに見せる演出で、動いている間ずっと連続的に移動しますが、スクロールスナップは止まる位置をあらかじめ決めた区切りに固定する点が異なります。「フルスクリーンセクション」は 100vh のセクションを縦に並べるレイアウトそのもので、スクロールスナップと組み合わせることでページ送りのような見せ方になります。

デモ

コード

HTML

<div class="scrollsnap-demo">
  <section class="scrollsnap-demo__section scrollsnap-demo__section--1">
    <h2>セクション 1</h2>
  </section>
  <section class="scrollsnap-demo__section scrollsnap-demo__section--2">
    <h2>セクション 2</h2>
  </section>
  <section class="scrollsnap-demo__section scrollsnap-demo__section--3">
    <h2>セクション 3</h2>
  </section>
</div>

CSS

/* デモページ全体(html)をスナップコンテナにする */
html {
  scroll-snap-type: y mandatory;
}

.scrollsnap-demo {
  font-family: sans-serif;
  color: #ffffff;
  text-align: center;
}

.scrollsnap-demo__section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 48px);
  /* このセクションの上端でスナップして止まる */
  scroll-snap-align: start;
}

.scrollsnap-demo__section h2 {
  margin: 0;
  font-size: 22px;
}

.scrollsnap-demo__section--1 {
  background: #0017c1;
}

.scrollsnap-demo__section--2 {
  background: #333333;
}

.scrollsnap-demo__section--3 {
  background: #666666;
}