scroll-padding

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

scroll-padding-* プロパティは、スクロールポートの最適な表示領域のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。

構成するプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

/* キーワード値 */
scroll-padding: auto;

/* <length> 値 */
scroll-padding: 10px;
scroll-padding: 1em .5em 1em 1em;
scroll-padding: 10%;

/* グローバル値 */
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: unset;

値

<length-percentage>
スクロールポートの対応する縁からの内側へのオフセットを、有効な <length> または <percentage> として指定します。
auto
オフセットがユーザーエージェントによって決定されます。これは一般的には 0px になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。

公式定義

初期値auto
適用対象スクロールコンテナー
継承なし
パーセンテージrelative to the scroll container's scrollport
計算値指定値
アニメーションの種類by computed value type

形式文法

[ auto | <length-percentage> ]{1,4}
where 
<length-percentage> = <length> | <percentage>

仕様書

仕様書 状態 備考
CSS Scroll Snap Module Level 1
scroll-padding の定義		 勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scroll-paddingChrome 完全対応 69Edge 完全対応 79Firefox 完全対応 68IE 未対応 なしOpera 完全対応 56Safari 部分対応 11
補足
部分対応 11
補足
補足 Scroll padding is not applied for scrolls to fragment target or scrollIntoView(), see bug 179379.
WebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 68Opera Android 完全対応 48Safari iOS 部分対応 11
補足
部分対応 11
補足
補足 Scroll padding is not applied for scrolls to fragment target or scrollIntoView(), see bug 179379.
Samsung Internet Android 完全対応 10.0

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。