scroll-margin-inline

scroll-margin-inline プロパティは、インライン方向の scroll-margin の個別指定を設定する一括指定プロパティです。

scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。

初期値0
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類by computed value type
正規順序構文通り

構文

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

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

<length>
スクロールコンテナーの対応する辺からの距離です。

形式文法

<length>{1,2}

仕様書

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

ブラウザーの互換性

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

凡例

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