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

URL: https://webrandum.net/css-scroll-snap/
公開日: 2020-04-20
更新日: 2020-04-20
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

## この記事の要約

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

IE11は古い仕様の記述方法のため注意が必要。

画面領域いっぱいにセクションが広がって、スクロールすると画面にキレイにピタッとくっついてくれる。このような処理を実装するためにはいままで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](https://codepen.io/31mskz10/pen/NWqwLPZ) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

幅の指定や`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では古い仕様での記述がサポートとなっています。

[![Data on support for the css-snappoints feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/css-snappoints.png)](http://caniuse.com/#feat=css-snappoints)

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

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

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

そのため、IE11だと等間隔にしかスナップできません。

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