CSS3

プロパティ

scroll-padding-block、scroll-padding-inline

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

スクロール留め域： 略式プロパティ

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

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

auto

スクロール域の対応する辺からのオフセットは、ユーザー エージェントが決定することを指示する。これに対する使用長さは、一般に既定で 0px になるべきであるが、ユーザー エージェントは、0 以外の値の方が適切になるときは、それを検出する経験則を利用してよい。

例えばユーザー エージェントは、［固定的に位置された要素が、不透明なスクロール不能な“頭部見出し”として利用されていて、それが下にある内容を遮っていることを検出した］ときは、上端オフセットを、その要素の縦幅に解決することもできる ― “ページをめくる”操作（ PgDn キーを押下げたときなど）が、内容の“可視な 1 ページ”分だけ自動的にスクロールするように。

<length-percentage> ○

スクロール域の対応する辺から内方へのオフセットを定義する。根表示域に適用されるときは、オフセットは、（可視域ではなく）レイアウト表示域に相対的に ― 固定的に位置されたボックスの対応するインセット プロパティと同じ仕方で ― 計算された上で適用される。最適なビュー用領域は、その結果と可視域が交差する区画になる。【レイアウト表示域は、スクロールして見出せるもの全体を囲う区画と考えればよいであろう（一般に、可視域より広くなる）。】

注記： スクロール域はスクロール コンテナの可視域として定義されているが、スクロール コンテナが根をスクロールするものであるときは、scroll-padding によるオフセットはレイアウト表示域に相対的になる。

<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-padding-inline: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;
 ">１</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;
 ">２</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;
 ">３</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;
 ">４</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-padding-inline:20%;
">
 <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;
 ">１</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;
 ">２</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;
 ">３</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;
 ">４</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;
 scroll-padding-block:10px;
">
 <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;
 ">１</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;
 ">２</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;
 ">３</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;
 ">４</DIV>
</DIV>

これらのオフセットは、スクロール操作において［スクロール域の、“利用者から見える”と見なされる領域］をオフセットして抑制する。その効果は、［レイアウト／スクロール原点／初期位置／要素が実際に可視と見なされるかどうか］には及ばないが、次には影響して、［スクロール域の最適なビュー用領域の中では、利用者は 内容を途切れなく見れる］ようになるべきである：

• ［要素／キャレット］は、ビューの中へスクロールされると見なされるかどうか（例：［標的にする、またはフォーカスする］操作用に）
• ページめくり（ PgUp ／ PgDn キーにより、あるいは スクロール バーから誘発される等価な操作）に対するスクロール量を抑制するかどうか。

当のスクロール コンテナが留めコンテナでもある場合、この領域は、その 留め域 も定義する。それは、当のコンテナのスクロール域内の区画であり、留め位置を計算するときに、スクロール留め区画用の整列コンテナとして利用される。

html {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 500px 0 0;
}
.toolbar {
    position: fixed;
    height: 100%;
    width: 500px;
    right: 0;
}
img {
    scroll-snap-align: none center;
}

ユーザー エージェントは、根要素に設定された scroll-padding 値を文書表示域に適用するものとする。（overflow と違って、scroll-padding 値は、HTML <body> 要素からは伝播しないことに注意。）

テスト