§16-06Motion
Snap scroll
スクロールが各セクションの位置に吸着する。
スクロールを止めた位置がセクションの境目に揃い、途中で切れた表示を防ぐ。スライド形式の紹介ページや画像ギャラリーに向く。
実装のポイント
親に scroll-snap-type: x mandatory、子に scroll-snap-align を付けるだけで成立する。子が表示域より大きいなら proximity にする。
- 特徴
- CSS のみ
- デモで使っているもの
- CSS scroll snap
§16-06Motion
スクロールが各セクションの位置に吸着する。
スクロールを止めた位置がセクションの境目に揃い、途中で切れた表示を防ぐ。スライド形式の紹介ページや画像ギャラリーに向く。
親に scroll-snap-type: x mandatory、子に scroll-snap-align を付けるだけで成立する。子が表示域より大きいなら proximity にする。