scroll-margin-block

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

scroll-margin-block一括指定プロパティで、ブロック方向のスクロールマージンを設定します。

試してみましょう

構成要素のプロパティ

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

構文

css
/* <length> 値 */
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

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

<length>

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

解説

scroll-margin の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類計算値の型による

形式文法

scroll-margin-block = 
<length>{1,2}

仕様書

Specification
CSS Scroll Snap Module Level 1
# propdef-scroll-margin-block

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll-margin-block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報