スクロールをしたとき、要素の区切りのところで止まってほしいなあなんてことはないでしょうか。
そんな時はCSSのscroll-snap-typeを使うと、特に細かいこだわりさえなければjsに頼らなくてもあっさりと実現できます。
いまいち挙動がわからないかもしれないので、実際に見てみましょう。
縦スクロールをしてみる
See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.
ちょっとずつ要素を縦スクロールするとわかりやすいと思うのですが、それぞれ区切りの頭の部分でピタッと止まります。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="scrollWrap"> <section class="cont"> <p>1</p> </section> <section class="cont"> <p>2</p> </section> <section class="cont"> <p>3</p> </section> <section class="cont"> <p>4</p> </section> <section class="cont"> <p>5</p> </section> </div> |
|
1 2 3 4 5 6 7 8 9 |
.scrollWrap { scroll-snap-type: y mandatory; overflow: auto; height: 100vh; } .scrollWrap .cont { scroll-snap-align: start; height: 100vh; } |
HTMLでは囲みをつくってその中に要素を入れていきます。
CSSの方では全体を囲んでいるところにscroll-snap-type: y mandatory;という風にy軸（垂直・縦方向）のスクロールで要素ごとに止まるかどうかを設定します。
十分な高さを確保、overflow: auto;（またはscrollなど）を設定してスクロールできるようにしてください。
横スクロールをしてみる
横スクロールだとこんな感じです。
See the Pen
scroll-snap-typeを使ってみよう2 by kkdd (@kk8kk)
on CodePen.
こちらもちょっとずつ動かすと端の方にすっとくっつくのがわかるかと思います。
HTMLは先ほどと同じ組方なので割愛します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.scrollWrap { scroll-snap-type: x mandatory; overflow: auto; height: 100vh; display: flex; width: 100%; } .scrollWrap .cont { scroll-snap-align: start; display: flex; flex-wrap: wrap; flex: none; justify-content: center; align-items: center; width: 100%; } |
今度はx軸（水平・横方向）用にscroll-snap-type: x mandatory;のように指定します。
今回はflexで横並びにしていますが方法は自由にしていただいて大丈夫です。
ちなみに縦横どちらも対応したい場合はscroll-snap-type: bothと指定することで実現できます。
mandatoryとproximityの使い分け
scroll-snap-typeに何となくつけていた『mandatory』ですがもうひとつ『proximity』という指定があります。何が違うの？と思うかもしれないですが、ものすごく大雑把に言うと
| mandatory | 止まるべき要素が近づいてきたらすぐにスナップしにいく |
|---|---|
| proximity | 止まるべき要素が本当に近づいてきたらスナップしに行く |
こちらも実際見ていただいた方が早いです。
mandatory
See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.
proximity
See the Pen
scroll-snap-typeを使ってみよう3 by kkdd (@kk8kk)
on CodePen.
同じくらいのスクロール量を試してみるとわかりやすいかと思います。
mandatoryの方がスナップしてる感はわかりやすいのですが、見せるべき要素がスクロールされてうまく見えない可能性もあるので、proximityにしてみるなど使い分けが大事です。
scroll-snap-alignを使い分ける
scroll-snap-alignにもstart、end、centerのように種類があります。これで止まる位置を指定できます。
| start | 要素の開始位置 |
|---|---|
| end | 要素の終了位置 |
| center | 要素の中央位置 |
これも実際に見てみましょう。
縦100%より微妙な高さの状態が挙動がわかりやすいです。
start
See the Pen
scroll-snap-typeを使ってみよう4 by kkdd (@kk8kk)
on CodePen.
end
See the Pen
scroll-snap-typeを使ってみよう5 by kkdd (@kk8kk)
on CodePen.
center
See the Pen
scroll-snap-typeを使ってみよう6 by kkdd (@kk8kk)
on CodePen.
スクロールしてみるとわかりますが、それぞれ止まる位置が微妙に調整されますね。
scroll-snap-typeを使いこなせれば、簡単にスクロール操作ができます。
ぜひ試してみてください。
