CSS3

プロパティ

scroll-margin-block、scroll-margin-inline

→●、mdn（scroll-margin-block、scroll-margin-inline）

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

これらは、scroll-margin を成す下位プロパティ。
scroll-margin-block は［scroll-margin-block-start、scroll-margin-block-end］用の、scroll-margin-inline は［scroll-margin-inline-start、scroll-margin-inline-end］用の略式プロパティ。順に、スクロール留め区画の［ブロック軸、行内軸］辺を指定する。

値が 2 個指定された場合、順に、［始端、終端］用の値を与える。

<length>{1,4} ○

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

<DIV style="border:1px solid red; width:100px; height:100px;
 box-sizing:content-box;
 display:flex;
 overflow-x:scroll;
 scroll-snap-type:x mandatory;
">
 <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-inline: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-inline: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-inline: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-inline:10px;
 ">４</DIV>
</DIV>

テスト