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

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 の定義
勧告候補 初期定義

ブラウザ互換性

機能 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,