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 は一括指定プロパティで、要素のすべての辺に一度にスクロールパディングを設定します。スクロールコンテナー内におけるスクロールポートの最適表示領域を定義するオフセットを指定します。
試してみましょう
scroll-padding: 0;
scroll-padding: 20px;
scroll-padding: 20%;
<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: white;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroller > div:nth-child(even) {
background-color: white;
color: rebeccapurple;
}
構成要素のプロパティ
このプロパティは以下の 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 プロパティは一括指定で、scroll-padding-top、scroll-padding-right、scroll-padding-bottom、scroll-padding-left をその順序で設定します。これらはそれぞれスクロールコンテナーの上部、右側、下部、左側のスクロールパディングを設定します。
スクロールスナップコンテナーを作成する際に役立つ scroll-padding プロパティは、スクロールポートの最適な表示領域（ユーザーに表示される要素の配置先となる領域）のオフセットを定義することができます。これにより、固定位置のツールバーやサイドバーなどコンテンツを遮る可能性のあるオブジェクトのための余地を確保したり、対象要素とスクロールポートの端との間に余裕を持たせたりするために、スクロールポート内に内側の空間を作成することができます。
このプロパティは CSS スクロールスナップモジュールで定義されていますが、scroll-snap-type プロパティの値にかかわらず、すべてのスクロールコンテナーに適用されます。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | スクロールコンテナー |
| 継承 | なし |
| パーセント値 | スクロールコンテナーのスクロールポートに対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 計算値の型による |
形式文法
scroll-padding =
[ auto | <length-percentage [0,∞]> ]{1,4}
<length-percentage> =
<length> |
<percentage>
仕様書
| Specification |
|---|
| CSS Scroll Snap Module Level 1 # scroll-padding |
ブラウザーの互換性
関連情報
scroll-snap-type- スクロールスナップの基本概念
- CSS スクロールスナップモジュール
- CSS オーバーフローモジュール
- CSS スクロール駆動アニメーションモジュール