CSS3

：

プロパティ

：

scroll-padding-block-start、scroll-padding-block-end、scroll-padding-inline-start、scroll-padding-inline-end

　編集：2022.07.14 by T.A.

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

スクロール留め域。

名前 scroll-padding-block-start、
scroll-padding-block-end、
scroll-padding-inline-start、
scroll-padding-inline-end
値 auto | <length-percentage>
初期値 auto
適用対象 スクロール コンテナ
継承 されない
百分率 スクロール域の対応する次元に相対的
算出値 キーワード auto ／ 算出された <length-percentage> 値
正準的順序 文法に従う
アニメーション型 算出値の型による

scroll-padding を成す下位プロパティ。順に、留め域の［ブロック始端、ブロック終端、行内始端、行内終端］辺を指定する。負な値は無効。

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-end: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:end;
 ">１</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:end;
 ">２</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:end;
 ">３</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:end;
 ">４</DIV>
</DIV>

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

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

scroll-padding を利用して、スライドショー画像を、［スクロール域内の、固定的に位置された .toolbar で遮られていない部分］の中央に据える例： 

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> 要素からは伝播しないことに注意。）

テスト
HTML：

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

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：