Widely available 全主要ブラウザで対応済み。安心して使用できる。

Scroll Snap

scroll-margin は一括指定プロパティで、ちょうど margin プロパティが要素のマージンを値を割り当てるように、要素のすべてのスクロールマージンを一度に値を割り当てます。

スクロールUX

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
scroll-margin
69
79
90
14.1
69
14.5
その他
css.properties.scroll-margin-block

scroll-margin-block は一括指定プロパティで、ブロック方向のスクロールマージンを設定します。
69
79
68
15
69
15
css.properties.scroll-margin-block-end

scroll-margin-block-end プロパティは、スクロールスナップ領域のブロック方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
15
69
15
css.properties.scroll-margin-block-start

scroll-margin-block-start プロパティは、スクロールスナップ領域のブロック方向における先頭側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
15
69
15
css.properties.scroll-margin-bottom

scroll-margin-bottom プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
14.1
69
14.5
css.properties.scroll-margin-inline

scroll-margin-inline は一括指定プロパティで、インライン方向のスクロールマージンを設定します。
69
79
68
15
69
15
css.properties.scroll-margin-inline-end

scroll-margin-inline-end プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
15
69
15
css.properties.scroll-margin-inline-start

scroll-margin-inline-start プロパティは、スクロールスナップ領域のインライン方向における先頭側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
15
69
15
css.properties.scroll-margin-left

scroll-margin-left プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
14.1
69
14.5
css.properties.scroll-margin-right

scroll-margin-right プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
14.1
69
14.5
css.properties.scroll-margin-top

scroll-margin-top プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して（スクロールコンテナーの座標空間における軸に合わせられ）、それから指定された外部距離が追加されます。
69
79
68
14.1
69
14.5
css.properties.scroll-padding

scroll-padding は一括指定プロパティで、要素のすべての辺に一度にスクロールパディングを設定します。scroll container内におけるスクロールポートの最適表示領域を定義するオフセットを指定します。
69
79
68
14.1
69
14.5
css.properties.scroll-padding-block

scroll-padding-block は一括指定プロパティで、要素のブロック方向のスクロールパディングを設定します。
69
79
68
15
69
15
css.properties.scroll-padding-block-end

scroll-padding-block-end プロパティは、スクロールポートの最適表示領域のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
15
69
15
CSS プロパティ
auto
69
79
68
15
69
15
その他
css.properties.scroll-padding-block-start

scroll-padding-block-start プロパティは、スクロールポートの最適表示領域のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
15
69
15
CSS プロパティ
auto
69
79
68
15
69
15
auto
69
79
68
15
69
15
その他
css.properties.scroll-padding-bottom

scroll-padding-bottom プロパティは、スクロールポートの最適表示領域の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
14.1
69
14.5
css.properties.scroll-padding-inline

scroll-padding-inline は一括指定プロパティで、要素のインライン方向のスクロールパディングを設定します。
69
79
68
15
69
15
css.properties.scroll-padding-inline-end

scroll-padding-inline-end プロパティは、スクロールポートの最適表示領域のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
15
69
15
CSS プロパティ
auto
69
79
68
15
69
15
その他
css.properties.scroll-padding-inline-start

scroll-padding-inline-start プロパティは、スクロールポートの最適表示領域のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
15
69
15
CSS プロパティ
auto
69
79
68
15
69
15
auto
69
79
68
15
69
15
その他
css.properties.scroll-padding-left

scroll-padding-left プロパティは、スクロールポートの最適表示領域の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
14.1
69
14.5
css.properties.scroll-padding-right

scroll-padding-right プロパティは、スクロールポートの最適表示領域の右のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
14.1
69
14.5
css.properties.scroll-padding-top

scroll-padding-top プロパティは、スクロールポートの最適表示領域の上のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ（固定位置のツールバーやサイドバーなど）によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。
69
79
68
14.1
69
14.5
CSS プロパティ
auto
69
79
68
11
69
11
その他
css.properties.scroll-snap-align

scroll-snap-align プロパティは、ボックスのスナップ位置を、そのスナップコンテナーのスナップポート（つまりalignment container）の中におけるスナップ領域（つまり alignment subject）の配置として指定します。
69
79
68
11
69
11
CSS プロパティ
center
69
79
68
11
69
11
end
69
79
68
11
69
11
none
69
79
68
11
69
11
start
69
79
68
11
69
11
その他
css.properties.scroll-snap-stop

scroll-snap-stop は CSS のプロパティで、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。
75
79
103
15
75
15
CSS プロパティ
always
75
79
103
15
75
15
normal
75
79
103
15
75
15
その他
css.properties.scroll-snap-type

scroll-snap-type は CSS のプロパティで、scroll containerに設定され、スナップポート内のスナップポイントの強制の方向と厳格さを設定することで、スクロールスナップを有効にします。
69
79
99
11
69
11
CSS プロパティ
block
69
79
68
11
69
11
both
69
79
68
11
69
11
inline
69
79
68
11
69
11
none
69
79
39
11
69
11
x
69
79
68
11
69
11
y
69
79
68
11
69
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (90)
実装メモ
  • `scroll-margin` プロパティにより、要素の可視性が `element.focus()` に対して誤って計算される可能性があります。 バグ 1708303 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin (11)
実験的機能
  • バージョン 14.1 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin (11)
実験的機能
  • バージョン 14.5 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-bottom (11)
実験的機能
  • バージョン 14.1 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-bottom (11)
実験的機能
  • バージョン 14.5 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-left (11)
実験的機能
  • バージョン 14.1 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-left (11)
実験的機能
  • バージョン 14.5 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-right (11)
実験的機能
  • バージョン 14.1 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-right (11)
実験的機能
  • バージョン 14.5 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-top (11)
実験的機能
  • バージョン 14.1 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
対応条件
  • 以前は別名で対応していました: scroll-snap-margin-top (11)
実験的機能
  • バージョン 14.5 より前では、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールにはスクロール マージンが適用されません。バグ 189265 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.1)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.5)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.1)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.5)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.1)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.5)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.1)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.5)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.1)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.5)
実験的機能
  • スクロール パディングは、フラグメント ターゲットまたは `scrollIntoView()` へのスクロールには適用されません。バグ 179379 を参照してください。
注釈 3件
削除済み
  • このバージョンで機能が削除されました (79)
対応条件
  • ベンダープレフィックス付きで対応: -ms- (12)
実装メモ
  • Edge は、軸値のない CSS スクロール スナップの以前のドラフトをサポートしています。
注釈 5件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (99)
  • このバージョンで機能が削除されました (68)
実装メモ
  • macOS Monterey では、スクロール スナップが確実に完了しません。 バグ 1749352 を参照してください。
  • 軸の値を含まない CSS スクロール スナップの初期のドラフト。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)
実装メモ
  • 古い Safari バージョンでは、軸値のない CSS スクロール スナップの以前のドラフトがサポートされています。
注釈 2件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (9)
実装メモ
  • iOS バージョンの古い Safari は、軸値のない CSS スクロール スナップの以前のドラフトをサポートしています。

基本構文

CSS 
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

.scroll-container > .item {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

ライブデモ

horizontalscroll Mandatory

Scroll Snap horizontalscroll mandatory demo.

プレビュー全画面表示

verticalscroll Proximity

Scroll Snap verticalscroll proximity demo.

プレビュー全画面表示

Center align

Scroll Snap Center align demo.

プレビュー全画面表示

実務での使いどころ

  • 画像カルーセル

    横スクロールで画像を1枚ずつスナップさせるカルーセルをJSなしで実装できる。

  • フルページスクロール

    セクションごとにスナップするフルスクリーンのページ送りUIを実現する。

注意点

  • mandatory は強制的にスナップするため、コンテンツが見切れるケースに注意。proximity の方が柔軟な場合もある。
  • ネストされたスクロールコンテナでは意図しない挙動になることがある。

アクセシビリティ

  • キーボードやスクリーンリーダーでもスナップポイント間を移動できることを確認する。

参考リンク