scroll-margin-top

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

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

構文

/* <length> 値 */
scroll-margin-top: 10px;
scroll-margin-top: 1em;

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

<length>
スクロールコンテナーの上側の辺からみた外部の距離です。

形式文法

<length>

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
scroll-margin-topChrome 完全対応 69Edge 完全対応 79Firefox 完全対応 68IE 未対応 なしOpera 完全対応 56Safari 部分対応 11
補足 代替名
部分対応 11
補足 代替名
補足 Scroll margin is not applied for scrolls to fragment target or scrollIntoView(), see bug 189265.
代替名 非標準の名前 scroll-snap-margin-top を使用しています。
WebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 68Opera Android 完全対応 48Safari iOS 部分対応 11
補足 代替名
部分対応 11
補足 代替名
補足 Scroll margin is not applied for scrolls to fragment target or scrollIntoView(), see bug 189265.
代替名 非標準の名前 scroll-snap-margin-top を使用しています。
Samsung Internet Android 完全対応 10.0

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。