これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

CSSscroll-snap-type プロパティは、スクロールコンテナ上でスナップ点が存在する場合に、どの程度徹底して押しやるかを定義します。

スナップ点へ押しやるのに使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、代わりにユーザーエージェントに委ねられます。

/* キーワードによる値 */
scroll-snap-type: none;
scroll-snap-type: mandatory;
scroll-snap-type: proximity;

/* グローバルな値 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

初期値none
適用対象scroll containers
継承不可
メディアinteractive
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

none
このスクロールコンテナのビジュアル viewport がスクロールする時は、スナップ点を無視しなければなりません。
mandatory
このスクロールコンテナのビジュアルビューポートは、目下スクロール中でなければスナップ点に載ります。これはスクロールアクションが終了した際に、可能であればその点に嵌るということを意味しています。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。
proximity
このスクロールコンテナのビジュアルビューポートは、目下スクロール中でなければ、ユーザーエージェントのスクロールパラメータを検討しつつスナップ点に載るよう動作するかもしれません。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されるかもしれません。

形式文法

none | mandatory | proximity

HTML コンテンツ

<div class="container mandatoryScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container proximityScrollSnapping">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS コンテンツ

.container {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

.mandatoryScrollSnapping {
  margin-bottom: 20px;
  scroll-snap-type: mandatory;
}

.proximityScrollSnapping {
  scroll-snap-type: proximity;
}

.container > div {
  width: 100%;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.container > div:nth-child(even) {
  background-color: #87EA87;
}

.container > div:nth-child(odd) {
  background-color: #87CCEA;
}

仕様

仕様書 策定状況 備考
CSS Scroll Snap Module Level 1
scroll-snap-type の定義
勧告候補 初期定義

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 未サポート 39.0 (39.0) 10-ms- 未サポート 9-webkit-
機能 Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート 39.0 (39.0)[1] 39.0 (39.0) 未サポート 未サポート 9-webkit-

[1] Firefox Mobile では Gecko 39 から使用可能ですが、layout.css.vertical-text.enabled を設定した状況下である必要があり、これはデフォルトで無効化されています。

ドキュメントのタグと貢献者

このページの貢献者: KitaitiMakoto
最終更新者: KitaitiMakoto,