スクロール時に表示領域に画面がくっつくようになる処理をCSSだけで実現する「scroll-snap」

画面領域いっぱいにセクションが広がって、スクロールすると画面にキレイにピタッとくっついてくれる。このような処理を実装するためにはいままでJavaScriptを使う必要がありましたが、scroll-snapを使えばCSSだけで簡単に実装できます。

基本的な使い方

1番基本的なscroll-snapの挙動を実装したいときは、HTMLの親要素と子要素に下記の指定をするだけで実装ができます。

1. 親要素にscroll-snap-type: mandatory;を指定する
2. 子要素にscroll-snap-align: start;を指定する
3. widthやheightで幅の指定をする
4. 親要素にoverflow: scroll;を指定

See the Pen scroll-snap-type by Masakazu Saito (@31mskz10) on CodePen.

幅の指定やoverflow: scroll;を指定していないと、動かないときがあります。

scroll-snapの指定をしているはずなのにちゃんと機能しない場合は、この辺りを疑うようにしましょう。

scroll-snap-typeの指定

親要素に指定するscroll-snap-typeでは、「スクロールの方向」「スクロール調整の強さ」を指定します。

スクロールの方向はx・y・bothの3種類があり、それぞれ横方向・縦方向・両方（省略可）にスクロールしたときにくっつくようになります。

スクロール調整の強さはmandatoryとproximityの2種類があります。

mandatoryを使う場合は、必ずスナップ位置にスクロールするようになります。
逆にproximityの場合は境界線に近づくとピタッとくっつきますが、境界線との距離が遠い場合はくっつかなくなります。

scroll-snap-alignの指定

子要素に指定するscroll-snap-alignでは、「スナップする位置」を指定します。

値はstart・end・centerの3種類があり、それぞれ要素の開始・終了・真ん中でスナップするようになります。
基本的にはstartを設定することになりそうです。

ブラウザ対応状況

そして気になるブラウザ対応状況ですが、IE11では古い仕様での記述がサポートとなっています。

古い仕様の記述方法は、親要素に下記のように書きます。

scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(500px);

子要素側への記述がなくなった代わりに、scroll-snap-points-yというプロパティでスナップする間隔を指定します。
そのため、IE11だと等間隔にしかスナップできません。

めずらしくIE11も対応なのかと思いきや、理想的な対応状況とは言えないですね。