css scroll-snap - WEBサイト制作の勉強

以前はjavascript等で制御していたスクロールスナップも現在ではcssのみで簡単に実装出来ます。またflexやvw、vhを使う事でレスポンシブにも簡単に対応出来ます。

scroll-snap-type: y mandatory;

ある程度スナップしたら、次のコンテンツに自動でスナップさせる場合は「mandatory」
コンテンツ中間地点にいる場合はその位置で停止するのが「proximity」
親要素に指定します

scroll-snap-align:start;

「start」エリアの開始位置
「end 」エリアの終わりの位置
「center 」親要素の中央で位置します

scroll-snap-stop:normal;

スクロール速度が早い場合にアイテムをいくつか飛ばしてしまう事があります。その時に、
「normal」いくつかスキップしてしまう（デフォルト）
「always」１つ１つ止まるようになる

scroll-paddingはショートハンドのプロパティで、paddingと同様に上下左右にスクロールのパディングを親要素に定義します。

子要素間の余白を使いたい時に指定します。

flex-grow：子要素の伸びる比率
flex-shrink：子要素の縮む比率
flex-basis：子要素のベースとなる幅の指定

flex-grow、flex-shrink、flex-basis の 3 つのプロパティーをflexプロパティ一行で指定できます。初期値は 0 1 auto。

 flex: 0 1 30%;