CSS scroll-margin 属性
- 前のページ scroll-behavior
- 次のページ scroll-margin-block
定義と使用法
scroll-margin この属性は、吸着位置とコンテナ間の距離を指定します。
これは、あなたがスクロールを停止したときに、スクロールが速く調整して、吸着位置（スナップ位置）とコンテナ間に指定された距離に停止するという意味です。
スナップ位置とは、子要素が停止したときに、コンテナ内に吸着する位置のことです。
scroll-margin この属性は以下の属性のショートカット属性です：
scroll-margin 属性の値はさまざまな方法で設定できます：
もし scroll-margin 属性が4つの値を持っている場合：
scroll-margin: 15px 30px 60px 90px;
- 上部の距離は 15px です
- 右側の距離は 30px です
- 下部の距離は 60px です
- 左側の距離は 90px です
もし scroll-margin 属性が3つの値を持っている場合：
scroll-margin: 15px 30px 60px;
- 上部の距離は 15px です
- 左右の距離は30pxです
- 下部の距離は 60px です
もし scroll-margin 属性が2つの値を持っている場合：
scroll-margin: 15px 30px;
- 上下の距離は15pxです
- 左右の距離は30pxです
scroll-margin属性に値が1つある場合：
scroll-margin: 10px;
- すべての方向の距離は10pxです
を確認するには、 scroll-margin 属性の効果を親要素に設定する必要があります scroll-margin および scroll-snap-align 属性を子要素に設定し、 scroll-snap-type 属性。
注意：以下の例では、すべての辺にスクロールマージンが設定されていますが、 scroll-snap-align 属性が "start" に設定されているため、スクロール行動が変わるのはトップのスクロールマージンだけです。
例
例 1
アンダーフロー位置とコンテナ間のスクロールマージンを20pxに設定します：
div {
scroll-margin: 20px;
}
例 2：画像ライブラリ
scroll-margin 属性は、アンダーフロー行動を持つ画像ライブラリに使用できます。ここでは、scroll-margin ユーザーが左側にまだ画像があることを確認できるようにします。最初の画像をスクロールすると効果が確認できます：
#container > img {
scroll-margin: 0 0 0 30px;
}
例 3：底と右側のスクロールマージンを設定
要素の底と右側に設定できます scroll-margin 属性。水平と垂直に次の要素までスクロールすると効果が確認できます：
#container > div {
scroll-margin: 0 10px 30px 0;
}
CSS 文法
scroll-margin: 0|value|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| 0 | スクロールマージンは0です。デフォルト値。 |
| length |
px、pt、cmなどの単位で指定されたスクロールマージンを指定してください。負の値も使用できます。 参照してください：CSS 単位。 |
| initial | この属性をデフォルト値に設定します。参照してください。 initial。 |
| inherit | この属性は親要素から継承されます。参照してください。 inherit。 |
技術的な詳細
| デフォルト値： | 0 |
|---|---|
| 継承性： | いいえ |
| アニメーション作成： | サポートしていません。参照してください：アニメーション関連属性。 |
| バージョン： | CSS3 |
| JavaScript 文法： | object.style.scrollMargin="20px" |
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 90.0 | 14.1 | 56.0 |
関連ページ
- 前のページ scroll-behavior
- 次のページ scroll-margin-block
