BLOG

• 2019.02.16
• CSS

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

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

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

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

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

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

目次

1. とにかくできることはこれだ
2. 対応ブラウザについて
3. 2つのプロパティを理解しておけばとりあえず使える
4. 縦軸verと横軸verのスナップ画面を作る
5. カルーセルを作ってみる

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です。

See the Pen scroll-snap-type Y by Kobayashi Yuka (@kobayashiyuka) on CodePen.36002

 

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

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

横軸

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

See the Pen scroll-snap-type X by Kobayashi Yuka (@kobayashiyuka) on CodePen.36002

 

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

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

 

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

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

 

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

See the Pen scroll-snap-type SlideX by Kobayashi Yuka (@kobayashiyuka) on CodePen.36002

 

参考サイト

scroll-snapですが、他にもたくさんのプロパティがあります。

scroll-snap-type

scroll-snap-align

いろんなプロパティを掛け合わせて、jsでしか実装できなかったことがCSSのみで実現できそうです。
参考になれば幸いです。

動画

縦スクロールバージョン

横スクロールバージョン

• 

• この記事を書いた人小林 友加

  こう見えてドラムぼちぼち叩けます。サウナ依存中