CSS Scroll Snap
以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます。
慣性スクロール
慣性スクロールとは、主にマルチタッチインターフェースで採用されている機能で、画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のことである。 慣性スクロールが機能することで、スクロール操作の繰り返しが連続的な動作になる。
Y方向にスクロールスナップ
See the Pen
scroll-snap-y by yachin29 (@yachin29)
on CodePen.
スクロールの方向とスナップの種類
scroll-snap-type: y mandatory;
ある程度スナップしたら、次のコンテンツに自動でスナップさせる場合は「mandatory」
コンテンツ中間地点にいる場合はその位置で停止するのが「 proximity」
親要素に指定します
子要素の停止位置
scroll-snap-align:start;
「start」 エリアの開始位置
「end 」エリアの終わりの位置
「center 」親要素の中央で位置します
子要素のスキップ
scroll-snap-stop:normal;
スクロール速度が早い場合にアイテムをいくつか飛ばしてしまう事があります。その時に、
「normal」いくつかスキップしてしまう（デフォルト）
「always」１つ１つ止まるようになる
scroll-padding
scroll-paddingはショートハンドのプロパティで、paddingと同様に上下左右にスクロールのパディングを親要素に定義します。
scroll-margin
子要素間の余白を使いたい時に指定します。
