こんにちは、ユアサです。
The State of CSS 2020で比較的認知度が低かったCSSのscroll-snapプロパティについて気になったので、今回はこの内容について書きまとめていこうと思います。
scroll-snapって？
scroll-snapプロパティは、画面をスクロールさせた際に要素の期待される位置にピタッと停止させることができます。仕組みとしてはスクロール操作完了時に要素のスクロール域が停止していいスクロール位置を設定することによって動作が実現できるといった感じです。
またIE、Chrome、Edge、Firefox、Safariといったブラウザにも対応していますが、IE11やEdge18以前のブラウザでは、古い仕様での指定が必要になります。
プロパティについて
厳密にいうとscroll-snapという形で使用するわけではなく、scroll-snap-typeプロパティとscroll-snap-alignプロパティの二種類を定義して設定することができます。それぞれコンテナの親要素にscroll-snap-type、内側の子要素にscroll-snap-alignを定義します。
各プロパティで設定できる値は以下のとおりです。
scroll-snap-type
- none：スナップ位置を無視する
- x：X軸方向（水平方向）にのみスナップ位置を合わせる
- y：Y軸方向（垂直方向）にのみスナップ位置を合わせる
- block：ブロック軸にのみスナップ位置を合わせる
- inline：インライン軸（行内軸）にのみスナップ位置を合わせる
- both：両軸方向に個別にスナップ位置を合わせる
- mandatory：現在スクロール中でない限りスナップ位置に合わせる。内容が追加、削除、リサイズなどされた場合はスクロールした位置が設定したスナップ位置に留まる
- proximity：スナップ位置に近ければスナップ位置に合わせる。各スナップ位置の中間地点でスクロールが止まっている場合はその位置に合わせる。内容が追加、削除、リサイズなどされた場合はスクロールした位置が設定したスナップ位置に留まる
scroll-snap-align
- none：スナップ位置を定義しない
- start：要素の上端にスナップ位置を定義する。scroll-snap-typeで設定した値によってX軸方向（水平方向）にスクロールされることが想定される場合は要素の左端に定義する
- center：要素の上端にスナップ位置を定義する。
- end：要素の下端にスナップ位置を定義する。scroll-snap-typeで設定した値によってX軸方向（水平方向）にスクロールされることが想定される場合は要素の右端に定義する
使用例
まずscroll-snap-typeプロパティでyとmandatoryの値を設定し、scroll-snap-alignプロパティでstartの値を設定してみます。
また古い仕様での指定としてscroll-snap-typeプロパティとscroll-snap-points-yプロパティを使って値を設定しています。
See the Pen by felly (@felly00505) on CodePen.
Y軸方向のスクロール時、各要素の上端でスクロールが停止するようになりました。またscroll-snap-typeプロパティにmandatoryが設定されているので、弱めにスクロールしても必ず要素の上端で止まるようになっています。
次にscroll-snap-typeプロパティでyとproximityの値を設定し、scroll-snap-alignプロパティでstartの値を設定してみます。
See the Pen by felly (@felly00505) on CodePen.
こちらもY軸方向のスクロール時にスナップ位置である要素の上端に近ければスクロールが停止しますが、スナップ位置とスナップ位置の中間地点でスクロールが止まった際にはその位置でそのまま留まるようになっています。
まとめ
今回はCSSプロパティの中でもまだ比較的認知度が低いと思われるscroll-snapプロパティについて紹介しました。
個人的にこのプロパティは、複数の要素のコンテナを画面いっぱいに表示させるようなダイナミックなページなどには積極的に使われていくようになるのかな？と感じました。もっと認知度が増えれば色んな応用の仕方が生まれてくるかもしれませんね！
今回も最後まで読んでいただきありがとうございました（^人^）
