スクロールした時に表示領域の位置にピタッと止めるスクロールスナップはscroll-snapプロパティを使えば、cssだけで簡単に実装することができます。
See the Pen
scroll-snap by KUBO (@KUBOGEN)
on CodePen.
HTML
<div class=”container”>
<div class=”box”>1</div>
<div class=”box”>2</div>
<div class=”box”>3</div>
<div class=”box”>4</div>
<div class=”box”>5</div>
<div class=”box”>6</div>
</div>
<div class=”container”>
<div class=”box”>1</div>
<div class=”box”>2</div>
<div class=”box”>3</div>
<div class=”box”>4</div>
<div class=”box”>5</div>
<div class=”box”>6</div>
</div>
CSS
.container {
height: 100vh;
overflow: auto;
scroll-snap-type: y mandatory;
}
.box {
height: 100vh;
scroll-snap-align: start;
}
.container {
height: 100vh;
overflow: auto;
scroll-snap-type: y mandatory;
}
.box {
height: 100vh;
scroll-snap-align: start;
}
スクロールスナップの実装に最低限必要なのはこれだけでOK。
「height: 100vh;」で親要素と子要素ともに画面いっぱいに高さを指定しており、親要素のcontainerには「overflow: auto;」を指定します。
そして、ポイントは親要素に指定している「scroll-snap-type: y mandatory;」、子要素に指定している「scroll-snap-align: start;」です。
スクロールの方向を指定
x軸、y軸、またはその両方を指定することで、スクロールスナップの方向を決めます。
scroll-snap-type: x;
x軸は横方向のスクロールスナップを実装する場合に指定します。
scroll-snap-type: y;
y軸は横方向のスクロールスナップを実装する場合に指定します。
scroll-snap-type: both;
bothを指定すると、横方向と縦方向の両方に対応させることができます。
スクロールの位置調整
mandatory
mandatoryはスクロールの位置を厳密に調整してくれるので、ピタッと止まります。
proximity
proximityはmandatoryほど厳密ではなく、スクロールを止めた位置がスナップポイントに近い場合にはピタッと調整されますが、真ん中とかだと中途半端な位置に止まってしまいます。
どの位置で止めるかを子要素に指定
どの位置で止めるかは親要素ではなく子要素（今回のデモの場合はboxクラスのdiv）に指定します。
scroll-snap-align: start;
開始位置で止めたい場合はstartを指定します。
scroll-snap-align: end;
終了位置で止めたい場合はendを指定します。
scroll-snap-align: center;
中央で止めたい場合はcenterを指定します。
Leave a Comment