CSS3

プロパティ

scroll-margin-block-start、scroll-margin-block-end、scroll-margin-inline-start、scroll-margin-inline-end

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

スクロール留め区画。

scroll-margin を成すこれらの下位プロパティ。順に、スクロール留め区画の［ブロック始端、ブロック終端、行内始端、行内終端］辺を指定する。

<length> ○

<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-start: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-start: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-start: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-start:10px;
 ">４</DIV>
</DIV>

<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:end;
  scroll-margin-block-end: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:end;
  scroll-margin-block-end: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:end;
  scroll-margin-block-end: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:end;
  scroll-margin-block-end: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;
 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-inline-start: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-start: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-start: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-start:10px;
 ">４</DIV>
</DIV>

テスト