CSS3

：

プロパティ

：

scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-left

　 編集：2022.07.14 by T.A.→●、mdn（scroll-margin-top、scroll-margin-right、scroll-margin-bottom、scroll-margin-left）

スクロール留め区画。

名前 scroll-margin-top、
scroll-margin-right、
scroll-margin-bottom、
scroll-margin-left
値 <length>
初期値 0
適用対象 すべての要素
継承 されない
百分率 受容しない
算出値 絶対長さ
正準的順序 文法に従う
アニメーション型 算出値の型による

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

<length> ○ 
<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-left: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-left: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-left: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-left: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:start;
  scroll-margin-top: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-top: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-top: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-top:10px;
 ">４</DIV>
</DIV>

テスト
HTML：

ここに表示
¶[Edge]？
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：