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 の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。