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 January 2020.

scroll-padding一括指定プロパティで、要素のすべての辺に一度にスクロールパディングを設定します。 padding プロパティで要素のパディングを設定するのとよく似ています。

試してみましょう

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: 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll-padding
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報