以前はjavascript等で制御していたスクロールスナップも現在ではCSSのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます。
Y方向にスクロールスナップ
X方向にスクロールスナップ
スクロールの方向とスナップの種類
| scroll-snap-type: y mandatory; |
ある程度スナップしたら、次のコンテンツに自動でスナップさせる場合は「mandatory」
コンテンツ中間地点にいる場合はその位置で停止するのが「proximity」
親要素に指定します。
proximityでスクロールスナップ (codepen.io)
■子要素の停止位置
| scroll-snap-align:start; |
「start」 エリアの開始位置
「end 」エリアの終わりの位置
「center 」親要素の中央で位置します
■子要素のスキップ
| scroll-snap-stop:normal; |
スクロール速度が早い場合にアイテムをいくつか飛ばしてしまう事があります。その時に、
「normal」いくつかスキップしてしまう（デフォルト）
「always」１つ１つ止まるようになる
★scroll-padding
scroll-paddingはショートハンドのプロパティで、paddingと同様に上下左右にスクロールのパディングを親要素に定義します。
★scroll-margin
子要素間の余白を使いたい時に指定します。
★gap
アイテム同士の横方向と縦方向の間隔をまとめて指定する際に使用します。