scroll-snap-align

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scroll-snap-alignChrome 完全対応 69Edge 完全対応 79Firefox 完全対応 68IE 未対応 なしOpera 完全対応 56Safari 完全対応 11WebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 68Opera Android 完全対応 48Safari iOS 完全対応 11Samsung Internet Android 完全対応 10.0

凡例

完全対応  
完全対応
未対応  
未対応