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

CSSscroll-snap-type プロパティは、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを定義します。

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

/* キーワード値 */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* 任意の mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/* など */

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

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

構文

none
このスクロールコンテナーの視覚的なビューポートがスクロールする時は、スナップ点を無視しなければなりません。
x
スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。
y
スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。
block
スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。
inline
スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。
both
スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。
mandatory
このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。
proximity
このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。

形式文法

none | mandatory | proximity

HTML コンテンツ

<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
  <div>X Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="ltr">
  <div>X Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="ltr">
  <div>Y Mand. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="ltr">
  <div>Y Prox. LTR</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x mandatory-scroll-snapping" dir="rtl">
  <div>X Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container x proximity-scroll-snapping" dir="rtl">
  <div>X Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y mandatory-scroll-snapping" dir="rtl">
  <div>Y Mand. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="container y proximity-scroll-snapping" dir="rtl">
  <div>Y Prox. RTL</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
</div>

CSS コンテンツ

/* setup */
html, body, .holster {
  height: 100%;
}
.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}

.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
/* scroll-snap */
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}

.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
/* appearance fixes */
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/* coloration */
.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 の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 69Edge 完全対応 12
接頭辞付き 補足
完全対応 12
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Edge supports an earlier draft of CSS Scroll Snap without axis values.
Firefox 完全対応 39
補足
完全対応 39
補足
補足 Firefox supports an earlier draft of CSS Scroll Snap without axis values.
IE 完全対応 10
接頭辞付き 補足
完全対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Internet Explorer supports an earlier draft of CSS Scroll Snap without axis values.
Opera 完全対応 56Safari 完全対応 11
完全対応 11
完全対応 9
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
WebView Android 完全対応 69Chrome Android 完全対応 69Edge Mobile 完全対応 12
接頭辞付き 補足
完全対応 12
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 Edge supports an earlier draft of CSS Scroll Snap without axis values.
Firefox Android 完全対応 46
補足
完全対応 46
補足
補足 Firefox supports an earlier draft of CSS Scroll Snap without axis values.
完全対応 39
無効
無効 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.
Opera Android 完全対応 56Safari iOS 完全対応 11
完全対応 11
完全対応 9
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Older Safari versions support an earlier draft of CSS Scroll Snap without axis values.
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

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

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