scroll-snap

インタラクション・UX

スクロールスナップを使用してスムーズなスクロール体験を提供します。scroll-snap-typeとscroll-snap-alignを組み合わせて使用します。

構文

Syntax
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

コード例

1

scroll-snap-type: x mandatory; scroll-snap-align: start;
実行結果
Slide 1
Slide 2
Slide 3
→ 横スクロールでスナップ

水平方向に必須スナップ、各要素を開始位置に配置

💡 TIPS

カルーセルやフォトギャラリーに最適

関連プロパティ

ブラウザサポート

Modern browsers