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

case2

いつだったか、随分と前に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のみで実現できそうです。
参考になれば幸いです。

Blogs List

CONTACT

当事務所にご関心をお持ちいただきまして、ありがとうございます。
ご意見・ご相談等、お気軽に下記よりお問合わせください。

© Copyright 2019 NIAR All rights reserved.