これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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
適用対象スクロールコンテナー
継承なし
メディアinteractive
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし12 -ms- 3910 -ms- なし9 -webkit-
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし12 -ms-

46

391

なし9 -webkit- なし

1. From version 39: this feature is behind the layout.css.scroll-snap.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

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

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