CSSのscroll-snapの対応ブラウザが増えてきたみたいなので勉強した

いつだったか、随分と前にCSSの「scroll-snap」を調べた時、対応ブラウザが全然少なくて、「使えへん。調べるんやめよ。」と思い、その時は勉強しませんでした。

対応ブラウザが増えてきたみたいなので、そろそろ現場でも使えそうかなと、改めて使い方を調べました。

掘り下げようとするといくらでも時間をかけてしまうので、とにかくscroll-snapはなんぞや。という備忘録です。

jsの手間が省けるので素晴らしいプロパティだと思います。
scroll-snapを使うきっかけになれば幸いです。

動画にもしているのでよかったらみてください。（ページ一番下）

1.とにかくできることはこれだ

わかりやすくお伝えできるかなと思い、GIFアニメにしたのですが、わかりますでしょうか？
わかりにくいですね。

少しスクロールしただけで、セクションごとに切り替わってくれるアレです。
（なんて言ったらいいかわからない）

これまではjQueryのプラグインなどを使って、実装したりしていました。
例として、scrollifyプラグインのデモページです。
ページへ行ってスクロールしていただけたら、あ〜これね。と、わかると思います。

scrollify DEMO

これがCSSだけでできる！！！！それが、scroll-snapプロパティです。
ありがとう！x 3000

2.対応ブラウザについて

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

IE、Edge、Firefoxは現状、ベンダープレフィックス等で対応できそうです。お〜。

3.2つのプロパティを理解しておけばとりあえず使える

①scroll-snap-type：横軸か縦軸かと、スナップするかどうか。（親要素にあてる）

②scroll-snap-align：どの位置にスナップするか。（子要素にあてる）

この二つです。

4.縦軸verと横軸verのスナップ画面を作る

縦軸

縦にスクロールしてみてください。
CSSに説明も入れてみました。
/* scroll-snap */とコメントアウトしている2箇所がscroll-snapです。

[codepen_embed height=”300″ theme_id=”36002″ slug_hash=”exrqPK” default_tab=”css,result” user=”kobayashiyuka”]See the Pen <a href=’https://codepen.io/kobayashiyuka/pen/exrqPK/’>scroll-snap-type Y</a> by Kobayashi Yuka (<a href=’https://codepen.io/kobayashiyuka’>@kobayashiyuka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

scroll-snap-type: y mandatory; /*y軸にスナップさせる*/

scroll-snap-align: start; /*上部にスナップさせる*/

横軸

横にスクロールしてみてください。
CSSに説明も入れてみました。
/* scroll-snap */とコメントアウトしている2箇所がscroll-snapです。

[codepen_embed height=”300″ theme_id=”36002″ slug_hash=”LqgMVb” default_tab=”css,result” user=”kobayashiyuka”]See the Pen <a href=’https://codepen.io/kobayashiyuka/pen/LqgMVb/’>scroll-snap-type X</a> by Kobayashi Yuka (<a href=’https://codepen.io/kobayashiyuka’>@kobayashiyuka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

scroll-snap-type: x mandatory; /*x軸にスナップさせる*/

scroll-snap-align: start; /*左にスナップさせる*/

簡単！！jsの手間を考えるとかなり時短です。ありがとう！ x 5000

5.カルーセルを作ってみる

簡単に作れました。ちょっとしたギャラリーなどに、使えそうです。

[codepen_embed height=”300″ theme_id=”36002″ slug_hash=”VgEqpM” default_tab=”css,result” user=”kobayashiyuka”]See the Pen <a href=’https://codepen.io/kobayashiyuka/pen/VgEqpM/’>scroll-snap-type SlideX</a> by Kobayashi Yuka (<a href=’https://codepen.io/kobayashiyuka’>@kobayashiyuka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]