scroll-padding-inline-start

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

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

構文

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

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

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

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

形式文法

auto | <length-percentage>

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

仕様書

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

ブラウザーの互換性

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

凡例

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