scroll-snap-align プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
構文
/* キーワード値 */ scroll-snap-align: none; scroll-snap-align: start end; /* 2つの値を指定すると、1番目がブロック、2番目がインラインとなる */ scroll-snap-align: center; /* グローバル値 */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: unset;
値
none- このボックスでは、その軸のスナップ位置を定義しません。
start- このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。
end- このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。
center- このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。
形式文法
[ none | start | end | center ]{1,2}
Safari は現在のところ、値2つの構文が誤った順になっており、1番目の値がインラインで2番目の値がブロックになっています。 バグ #191865 を参照してください。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Scroll Snap Module Level 1 scroll-snap-align の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll-snap-align | Chrome 完全対応 69 | Edge 完全対応 79 | Firefox 完全対応 68 | IE 未対応 なし | Opera 完全対応 56 | Safari 完全対応 11 | WebView Android 完全対応 69 | Chrome Android 完全対応 69 | Firefox Android 完全対応 68 | Opera Android 完全対応 48 | Safari iOS 完全対応 11 | Samsung Internet Android 完全対応 10.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応