scroll-padding
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.
scroll-padding は一括指定プロパティで、要素のすべての辺に一度にスクロールパディングを設定します。 padding プロパティで要素のパディングを設定するのとよく似ています。
試してみましょう
scroll-padding: 0; scroll-padding: 20px; scroll-padding: 2em; <section class="default-example" id="default-example"> <div class="scroller" id="example-element"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="info">スクロール »</div> </section> .default-example .info { inline-size: 100%; padding: 0.5em 0; font-size: 90%; writing-mode: vertical-rl; } .scroller { text-align: left; height: 250px; width: 270px; overflow-y: scroll; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid black; scroll-snap-type: y mandatory; } .scroller > div { flex: 0 0 250px; background-color: rebeccapurple; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(even) { background-color: #fff; color: rebeccapurple; } scroll-padding-* プロパティは、スクロールポートの最適な表示領域のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* キーワード値 */ scroll-padding: auto; /* <length> 値 */ scroll-padding: 10px; scroll-padding: 1em 0.5em 1em 1em; scroll-padding: 10%; /* グローバル値 */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: revert; scroll-padding: revert-layer; scroll-padding: unset; 値
<length-percentage>-
スクロールポートの対応する縁からの内側へのオフセットを、有効な
<length>または<percentage>として指定します。 auto-
オフセットがユーザーエージェントによって決定されます。これは一般的には
0pxになりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 計算値の型による |
形式文法
scroll-padding =
[ auto | <length-percentage [0,∞]> ]{1,4}
<length-percentage> =
<length> |
<percentage>
仕様書
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |