scroll-snap-typeを使用して子要素単位にスクロールさせる方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はCSSのscroll-snap-typeプロパティを使用して、子要素単位にスクロールさせる方法をご紹介します。

実現したいこと

冒頭、「子要素単位にスクロール」とはどんな状態かをご説明します。

CodePenに触れて、操作感の違いを感じてみてください。

まずは通常のスクロールです。

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen.

次に、今回実現したい子要素単位のスクロールです。

通常のスクロールを異なるのは、スクロールの停止位置が子要素の上辺に強制される点です。

子要素単位にスクロールさせるのはCSSだけで実現が可能です。

使用するのは scroll-snap-typeです。

scroll-snap-typeは、スクロール停止位置を子要素のスナップ点（スクロール停止位置）の指定に強制させるプロパティです。

先の例の場合で見てみましょう。

HTMLは以下のような構造とします。ul要素にはoverflow: auto;の指定があり、溢れた子要素はスクロールで省略されるようになっています。

<ul>
  <li>子要素1</li>
  <li>子要素2</li>
  <li>子要素3</li>
</ul>

親要素CSSは以下のようにします。

ul {
  overflow: auto;
  
  /* 中略 */

  scroll-snap-type: y mandatory;
}

scroll-snap-typeですが、今回は縦スクロールですのでY軸を指定します。

加えて、スクロール途中の場合は停止位置をスナップ点に合わせるmandatoryを指定します。

子要素ではスナップ点はどこかを明示する必要があります。

スナップ点の指定にはscroll-snap-alignを使用します。

li {
  scroll-snap-align: start;
}

今回は上辺、すなわち要素の先頭位置をスナップ点にしたいため、startを指定します。

これで完成です。

今回はCSSのscroll-snap-typeプロパティを使用して、子要素単位にスクロールさせる方法をご紹介しました。

スタイリングでお悩みの方の一助となれば幸いです。

ご精読ありがとうございました。