表示領域に合わせたスクロールが簡単に実装できるscroll-snap

早速ですが、まずは下サンプルの擬似スマートフォンの画面をスクロールさせてみてください。

See the Pen
scroll-snap-type_SAMPLE
by Takashi Abe (@TakeshiAbe)
on CodePen.

このサンプルのように、指定位置に合わせてスクロール移動をバシッと止めてくれるcssプロパティがscroll-snap-typeです。

登場した当初は少し使いにくい面があったり対応しているブラウザも少なかったりだったのですが、現在では改良され、ほとんどのモダンブラウザが対応したので、遠慮なく使えるプロパティとなりました。

サンプルでは高さを100%にしているので、表示スクリーンがそのまま動いているような動きになります。

別にheight:100%(100vh)である必要はありませんが、そうすることで簡単に表示領域単位でスクロールできるので、モバイルアプリやスマホ表示時のUIによく使われている印象があります。

横方向にも使えるので、スライド作成にも気軽に応用できます。

スクロールスナップに最低限必要なのは2行だけですので、実装は非常に簡単です。
早速指定方法を見ていきましょう。

scroll-snap-typeとscroll-snap-align

「scroll-snap-type」を指定したブロックの子要素が自動的にスナップ対象となります。
flexの子要素が自動的にflexアイテムになるのと同じです。

<div> ← scroll-snap-typeを指定する
 <div></div> ←snap対象
 <div></div> ←snap対象
 <div></div> ←snap対象
</div>

scroll-snapは、親に「スクロール方向と種類」子に「スナップさせる位置」を指定します。
簡単なので子要素の方からやります。

scroll-snap-align

スナップさせる要素が高さ100%とは限りませんので、「scroll-snap-align」で、どこを基準にスクロールを止めるかを【 start ・ center ・ end 】のいずれかで指定します。説明不要と思うので省きます。

#{
 scroll-snap-align: start ;
 scroll-snap-align: center ;
 scroll-snap-align: end ;
}

ちなみに初期値はnoneなので、指定しなければ通常のスクロールとなってしまいます。

次は親要素の指定です。

scroll-snap-type

まずスクロールする方向を指定します。
縦方向のスクロールならy、 横ならxです。bothを指定すると縦横両方向に指定されます。

#{
scroll-snap-type: y ;
scroll-snap-type: x ;
scroll-snap-type: both ;
}

続いてスナップの種類を指定します。
冒頭のサンプルに「Mandatory」「Proximity」と書いてありましたがあれです。

mandatory(= 強制)はユーザーのスクロール位置に関わらず強制的にバチっとスクロール挙動し、
proximity(= 近接)は、ユーザーのスクロールに応じて、mandatoryよりも気持ち緩やかにスクロールします。

mandatoryの方が動きがはっきりしていますが、テキスト量が多いコンテンツなどはproximityが合ってるかなと思います。
mandatory、proximityは先程のx、y、bothに続いてスペース区切りで指定します。

例{
scroll-snap-type: y mandatory;
scroll-snap-type: x proximity;
}

少し余談ですが、以前は「scroll-snap-type-x: mandatory」や「scroll-snap-type-y: proximity」のような指定方法がありました。
現在でもサポートしているブラウザはありますが、非推奨ですので古いまま放置している場合は「scroll-snap-type: 〜〜」に直しておきましょう。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年3月14日HTML/CSScss,mandatory,proximity

Posted by ミフネWEB