css scroll-snap

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

www.nike.com

スクロールの方向とスナップの種類(親要素に指定)

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

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

coliss.com

flexboxの設定

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

ショートハンドの場合

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

 flex: 0 1 30%;

code pen

See the Pen
スマホ時にスクロールスナップ by yachin29 (@yachin29)
on CodePen.

Y方向にスクロールスナップ

See the Pen
Y方向にスクロールスナップ by yachin29 (@yachin29)
on CodePen.

X方向にスクロールスナップ

See the Pen
X方向にスクロールスナップ by yachin29 (@yachin29)
on CodePen.

See the Pen
proximityでスクロールスナップ by yachin29 (@yachin29)
on CodePen.

スクロールのカスタマイズ

/* スクロールバーのサイズ */
.scroll-wrapper::-webkit-scrollbar { 
  height: 16px; 
} 
/* スクロールバーの色 */
.scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #0a7491;
  border-radius: 16px;
}

/* 枠の色 */
.scroll-wrapper::-webkit-scrollbar-track {
  background-color: #9a9a9a;
}