scroll-snap-type

インタラクション・UX

スクロールスナップコンテナの動作を定義するプロパティです。カルーセルやフルページスクロールの実装に使用します。

構文

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

コード例

1

scroll-snap-type: x mandatory;

横スクロールで必ずスナップ位置に吸着

2

scroll-snap-type: y proximity;

縦スクロールでスナップ位置に近い場合のみ吸着

3

scroll-snap-type: both mandatory;

縦横両方向で必ずスナップ

4

scroll-snap-type: none;

スナップ無効

💡 TIPS

JavaScriptなしでカルーセルやフルページスクロールを実装できる。mandatoryは確実にスナップ、proximityは近い場合のみスナップ。

⚠️ よくある間違い

子要素にscroll-snap-alignを指定しないと機能しない。overflowが設定されているコンテナに指定する必要がある。

関連プロパティ

ブラウザサポート

Chrome 69+, Firefox 68+, Safari 11+