スクロールスナップタイププロパティ

最終更新：2026-09-13

scroll-snap-type スクロールスナップタイププロパティ

scroll-snap-type プロパティは、スクロール時にスナップ（吸着）効果を有効にし、スクロールコンテナが停止した際に指定した要素をコンテナの端または中央に整列させます。カルーセル、全画面スクロールページ、横スワイプリストなどに一般的に使われ、スクロール体験をより正確かつ制御しやすくします。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

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

⚙️ 値

値	タイプ	説明
`none \| x \| y \| block \| inline \| both \| mandatory \| proximity`	キーワード	スクロールスナップの種類

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
scroll-snap-type	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： mandatory は常に最も近いスナップポイントへ吸着します。proximity は停止位置がスナップポイントに近い場合にのみ吸着する、より緩やかな挙動です。

ヒント： 各子要素の整列位置を決定するには、子要素に scroll-snap-align を組み合わせる必要があります。

❓ よくある質問

Qscroll-snap-type と scroll-behavior: smooth は競合しますか？

Aいいえ、役割が異なり、よく組み合わせて使われます。scroll-snap-type は「どこで止まるか」を決め、停止時にスナップポイントへ吸着します。scroll-behavior は「どう到達するか」を決め、滑らかなアニメーションで移動します。両方を設定すると、まず滑らかに移動してから正確に吸着するため、カルーセルや全画面スクロールの標準的な組み合わせです。

Qscroll-snap-type が子要素に吸着しないのはなぜですか？

A最も一般的な原因は、子要素に scroll-snap-align がないため吸着するスナップポイントが存在しないことです。あるいはコンテナのサイズが子要素と一致せず、停止時に到達可能なスナップ位置が存在しない場合や、コンテンツがあふれていない（そもそもスクロール不可）な場合もあります。コンテナが実際にスクロールし、子要素に scroll-snap-align: start/center/end が設定されているか確認してください。

Qscroll-snap-type の mandatory と proximity の違いは何ですか？

Amandatory は常に吸着します。スクロールが止まると、わずかに動かしただけでも最も近いスナップポイントへ吸着します。proximity は緩やかに吸着し、停止位置がスナップポイントに近い場合にのみ吸着し、それ以外は自由に停止します。mandatory は安定した感覚を得られますが中間コンテンツへの到達が難しくなることがあり、proximity はより自然で密度の高いコンテナに適しています。

Qscroll-snap-type のブラウザ対応状況はどうですか？

Aデスクトップの Chrome、Edge、Firefox、Safari はすべて対応していますが、Safari は長らく旧仕様を使用しており、-webkit-scroll-snap-type プレフィックスと異なる構文が必要でした。Chrome 69+ と Firefox 68+ は新仕様に対応しています。モバイルでは iOS Safari 13+ で動作し、古い iOS の場合はプレフィックスの違いに注意してください。