【CSS】scroll-snapプロパティについて

どうも、くまだです。

scroll-snapプロパティについてのあれこれ。

scroll-snap とは

scroll-snapプロパティは、スマホでのスナップ操作のように次のコンテンツを表示させることができます。

コードは以下のように記述します。

  <div class="l-container">

    <section>
      <p>セクション1</p>
    </section>

    <section>
      <p>セクション2</p>
    </section>

    <section>
      <p>セクション3</p>
    </section>
    <section>
      <p>セクション4</p>
    </section>

  </div>

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

section{
  height: 100vh;
  scroll-snap-align: center;
}

section:nth-child(1) {
  background-color: orange;
}
section:nth-child(2) {
  background-color: skyblue;
}
section:nth-child(3) {
  background-color: pink;
}
section:nth-child(4) {
  background-color: greenyellow;
}

See the Pen scroll-snap by kuma0605 (@kuma0605) on CodePen.

下にちょっとスクロールすると、次のコンテンツに吸い付くような感じでスクロールします。

scroll-snap-typeは値をyにすればy軸、xにすればx軸方向にスクロールしてコンテンツを止めます。

scroll-snap-alignプロパティは子要素に設定します。

scroll-snap-align: center;だと、次のセクションはセンターの位置でスクロールが止まり、scroll-snap-align: start;だと次のセクションは画面上部の位置までスクロールします。

〇 scroll-snap-align: center; パターン

See the Pen scroll-snap2 by kuma0605 (@kuma0605) on CodePen.

〇 scroll-snap-align: start; パターン

See the Pen scroll-snap3 by kuma0605 (@kuma0605) on CodePen.

ちなみにスマホのスナップ操作みたいに横スクロールバージョンもできます。

See the Pen Untitled by kuma0605 (@kuma0605) on CodePen.

ここまで読んでくださりありがとうございました。