CSSだけでスクロール時に画面領域をぴたっと固定(スナップ)することができる, scroll snap

はじめに

今日はCSSだけでスクロール時に画面領域をぴたっと固定(スナップ)することができる,scroll snapをご紹介します。

scroll snap(スクロールスナップ)とはスクロールした時に、特定の画面領域でぴったりスクロールが止まる動きのことを言います。

▼デモ(横にスクロールしてください)▼

See the Pen スクロールスナップ by Ayaka Sasaki (@ayausaspirit) on CodePen.

ブラウザサポートがだんだんとされてきていて、注目を集めているプロパティなので、今回はどういうものなのか、その文法、そしてブラウザの対応状況を簡単にご紹介します。

Scroll Snapの文法

今回のデモは非常にシンプルですが、こちらです。

See the Pen スクロールスナップ by Ayaka Sasaki (@ayausaspirit) on CodePen.

まずは、このようにScroll Snap(スクロールスナップ)の動きを再現するために必要なコアなプロパティを２つご紹介します。

スクロールスナップを作るためには下記２つのプロパティが必要になります。

• scroll-snap-type
• scroll-snap-align

scroll-snap-typeはスクロールスナップの動きを実装したい要素の親要素にかけます。
scroll-snap-alignはscroll-snap-typeの中の子要素にかけます。

つまりこのようなイメージです。

<div class='container'>
  <section class='page'></section>
  <section class='page'></section>
  <section class='page'></section>
</div>

.container {
  scroll-snap-type: y mandatory;
}

.page {
  scroll-snap-align: start;
}

scroll-snap-type

scroll-snap-typeにはmandatoryとproximityの二つの値があります。

mandatoryの値はどんなスクロールが起きても、ページにコンテンツが追加、削除、リサイズなどがされても、snapするようにできています。

proximityの値はもう少しゆるい動きをします。ユーザーがスクロールした時にsnap付近の場合は、snapしてくれますが、どんなときでもsnapしてくれるというわけではないようです。

▼先ほどの例を使い、proximityとmandatoryを比べてみる▼

See the Pen スクロールスナップ1 by Ayaka Sasaki (@ayausaspirit) on CodePen.

x方向とy方向で動きを変えたい場合は、scroll-snap-type-x scroll-snap-type-yと書くことでそれぞれ分けられることができます。

scroll-snap-align

一方、子要素の方にかける scroll-snap-align では中の要素のどの部分に対してsnapするべきなのかをしてすることができます。

scroll-snap-align が持てる値は start, center, endの３つです。

startでは、要素の一番上、もしくは左にsnapします。
centerでは、要素の真ん中にsnapします。
endでは、要素の一番下、もしくは右にsnapします。

基本的に、使う場合はstartを使うことが多いでしょう。

ブラウザ対応

なかなか便利そうな Scroll Snapですが、現状のブラウザ対応の状況はこんな感じになっています。

Can I Use css-snappoints? Data on support for the css-snappoints feature across the major browsers from caniuse.com.

最初に導入された2016年からは格段にブラウザサポート状況もよくはなっていますが、まだまだ使うのにはリスクがあるのでご注意ください。

また、使用される際はScroll Snap用のpolyfillがあるので、こちらも合わせてお使いいただくことをお勧めします。

scrollsnap-polyfill

まとめ

以上、CSSだけでスクロール時に画面領域をぴたっと固定(スナップ)することができる,scroll snapをご紹介しました。
こちらがどんどんサポートされていけば、今後JavaScriptを全く使わず、スクロールスナップが実現できるようになるので、楽しみですね。