CSS scroll-snap-align 属性
- 前ページ scroll-padding-top
- 次ページ scroll-snap-stop
定義と使用法
scroll-snap-align 属性は、スクロールを停止したときに要素が焦点の位置にアテンションする場所を指定します。
スクロールアテンションを実現するには、子要素上で設定する必要があります scroll-snap-align 属性、および親要素上で設定 scroll-snap-type 属性。
例
例1
ユーザーがスクロールを停止したとき、最も近い要素を中央位置にアドヒシブします：
div {
scroll-snap-align: center;
}
例2：画像ライブラリ
scroll-snap-align この属性は、画像ライブラリのスクロールブラウジングに非常に適しています。ここでは、スクロール方向は水平で、アドヒシブアライメントは中央です。ユーザーがスクロールバーを離したとき、最も近い画像がスクロール可能エリアの中央にアドヒシブします。画像をクリックして、左右の矢印キーを使用してそれらをブラウジングしようとします：
#container > img {
scroll-snap-align: none center;
}
例3：ブロック方向上での垂直アライメントアドヒシブ位置
垂直にスクロールする場合、scroll-snap-align 属性は、ブロック方向に要素の最初の場所としても設定できます：
#container > div {
scroll-snap-align: start none;
}
CSS文法
scroll-snap-align: none|start|end|center|block inline|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| none | スクロールアドヒシブ効果がありません。デフォルト値。 |
| start | x軸とy軸上で、要素の開始位置でスクロールアドヒシブを行います。 |
| end | x軸とy軸上で、要素の終了位置でスクロールアドヒシブを行います。 |
| center | x軸とy軸上で、要素の中心位置でスクロールアドヒシブを行います。 |
| block inline | 二値構文。最初の値はブロック方向のアドヒシブ方式を指定し、第二の値はインライン方向のアドヒシブ方式を指定します。 |
| initial | この属性をデフォルト値に設定します。参照してください。 initial。 |
| inherit | この属性は、親要素から継承されます。参照してください。 inherit。 |
技術的詳細
| デフォルト値： | none |
|---|---|
| 継承性： | いいえ |
| アニメーション作成： | サポートされていません。参照してください：アニメーション関連属性。 |
| バージョン： | CSS3 |
| JavaScript文法： | object.style.scrollSnapAlign="start" |
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |
関連ページ
- 前ページ scroll-padding-top
- 次ページ scroll-snap-stop
