CSS3

プロパティ

scroll-margin

[Edge]。→●、mdn

スクロール留め区画： 略式プロパティ。

このプロパティは、すべての scroll-margin-＊ 下位プロパティ を、一つの宣言でまとめて設定する略式プロパティであり、各側を表現している値をその各 下位プロパティにあてがう ― margin プロパティがその各 下位プロパティにあてがうときとちょうど同じように。

各 値は、外方へのオフセットを表現し、スクロール留め区画 ― 要素を留め域に留めるときに利用されるボックス ― を定義する。スクロール留め区画は、［変形されたボーダー ボックス†から、（スクロール コンテナの座標空間に軸が整列された）矩形な限界ボックスを見出した結果］に 指定された外方へのオフセットを加算する††ことにより、決定される。

【† CSS Transform による変形と思われる。】
【†† 負な値を与えた場合、内方へオフセットされることになる。】

注記： これは、スクロール留め区画が常に矩形になり、その軸はスクロール コンテナの座標空間に整列されることを確保する。

標的要素を定義する素片（:target に合致するものや、scrollIntoView() の標的になるもの）へ ページがナビゲートされたときは、ユーザー エージェントは、スクロール可能な過フロー区画を成す、どの区画をビューの中に持ってくるか決定するときには、要素の ― ボーダー ボックスではなく ― スクロール留め区画を利用するべきである ― この要素に対し留めがオフである／適用されないときでも。

<length>{1,4} ○

<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:x mandatory;
 scroll-margin:0 0 0 10px;
">
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-margin:10px;
 ">１</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-margin:10px;
 ">２</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-margin:20px;
 ">３</DIV>
 <DIV style="border:1px solid black; box-sizing:border-box;
  font-size:30px; flex:0 0 100px; width:100px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start;
  scroll-margin:10px;
 ">４</DIV>
</DIV>

テスト