scroll-padding-block

scroll-padding-block プロパティは、ブロック軸の scroll-padding 個別指定を設定する一括指定プロパティです。

scroll-padding 系のプロパティは、スクロールポートの最適表示領域のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。

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

構文

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

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

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

<length-percentage>
スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。
auto
オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。

形式文法

[ auto | <length-percentage> ]{1,2}

where
<length-percentage> = <length> | <percentage>

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scroll-padding-blockChrome 完全対応 69Edge 未対応 なしFirefox 完全対応 68IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 68Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応