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