CSS3

：

プロパティ

：

scroll-padding

　 編集：2022.07.05 by T.A.

→●、mdn

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

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

このプロパティは、スクロール域を成す、最適なビュー用領域 を定義するオフセットを指定する（スクロール留めコンテナのみならず、すべてのスクロール コンテナ用に） ― その領域は、利用者のビューにモノを配置する領域として利用される。これにより、作者は、スクロール域内の［他の内容（固定的に位置されたツール バーやサイド バーなど）に遮られる領域］を除外したり、単純に、当の要素とスクロール域の各辺との合間に余白をとることが可能になる。

scroll-padding プロパティは、すべての scroll-padding-* 下位プロパティ を一つの宣言でまとめて設定する略式プロパティであり、各側を表現している値をその各 下位プロパティにあてがう ― padding プロパティがその各 下位プロパティに値をあてがうときとちょうど同じように。

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

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

<DIV style="border:1px solid red; width:100px; font-size:20px;
 overflow:scroll;
 scroll-padding:auto;
">
 abcdefghijklmn
</DIV>

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

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

<DIV style="border:1px solid red; width:100px; font-size:20px;
 overflow:scroll;
 scroll-padding:20px;
">
 abcdefghijklmn
</DIV>


<DIV style="border:1px solid red; width:100px; height:100px; font-size:20px;
 overflow:scroll;
 scroll-padding:5px;
">
 <DIV style="border:1px solid black;">aaa</DIV>
 <DIV style="border:1px solid black;">bbb</DIV>
 <DIV style="border:1px solid black;">ccc</DIV>
 <DIV style="border:1px solid black;">ddd</DIV>
 <DIV style="border:1px solid black;">eee</DIV>
 <DIV style="border:1px solid black;">fff</DIV>
 <DIV style="border:1px solid black;">ggg</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: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>

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

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

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：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：