2018-2-4

[CSS] scroll-snapでJS無しでタッチ対応スライダーの実装

Demo

概要

CSS スクロールスナップ - CSS | MDN

Can I use... Support tables for HTML5, CSS3, etc

CanIuse で分かる通り、2018/2/4 時点では Chrome が対応していない。

とはいうものの Chrome 以外では対応しており、Chrome 自体も現在開発中とのことなのでそのうち使用できるようになると思う。

何が嬉しいか

ピンチインでの拡大に対応したスライダーが簡単に作成出来る。

現状では単にスナップするスライダーを作成する時点で JS を結構書かなくてはならず、更にピンチイン対応となるとかなり重くなってしまう。

scroll-snapを使えば、特に何もしなくてもピンチイン対応スライダーになってくれるので非常に有り難い。

使い方

Demo を見れば代替わかるので割愛