CSS scroll-padding 屬性
定義和用法
scroll-padding 屬性指定從容器到子元素吸附位置的距離。
這意味著，當你停止滾動時，滾動會快速調整并停止在距離容器到焦點子元素吸附位置的指定距離處。
吸附位置是指子元素在停止滾動時，其在容器中固定到位的位置。
scroll-padding 屬性是以下屬性的簡寫屬性：
scroll-padding 屬性的值可以通過不同方式設置：
如果 scroll-padding 屬性有四個值：
scroll-padding: 15px 30px 60px 90px;
- 頂部距離為 15px
- 右側距離為 30px
- 底部距離為 60px
- 左側距離為 90px
如果 scroll-padding 屬性有三個值：
scroll-padding: 15px 30px 60px;
- 頂部距離為 15px
- 左側和右側距離為 30px
- 底部距離為 60px
如果 scroll-padding 屬性有兩個值：
scroll-padding: 15px 30px;
- 頂部和底部距離為 15px
- 左側和右側距離為 30px
如果 scroll-padding 屬性有一個值：
scroll-padding: 10px;
- 所有四個方向的距離均為 10px
要看到 scroll-padding 屬性的效果，必須在子元素上設置 scroll-snap-align 屬性，并在父元素上設置 scroll-padding 和 scroll-snap-type 屬性。
注意：在下面的例子中，為所有邊設置了滾動內邊距，但由于 scroll-snap-align 設置為 "start"，因此只有頂部邊的滾動內邊距改變了滾動行為。
實例
例子 1
設置從容器到吸附位置的滾動內邊距為 20px：
div {
scroll-padding: 20px;
}
例子 2：圖片庫
scroll-padding 屬性可以在具有吸附行為的圖片畫廊中使用，以將圖片推到固定元素下方：
#container {
scroll-padding: 30px 0 0 0;
}
固定的頂部元素
例子 3：設置底部和右側的滾動內邊距
scroll-padding 屬性可以在容器的底部和右側同時設置。水平和垂直滾動到下一個元素以查看效果：
#container {
scroll-padding: 0 10px 30px 0;
}
CSS 語法
scroll-padding: auto|value|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| auto | 默認值。瀏覽器計算內邊距。 |
| length |
以 px、pt、cm 等單位指定滾動內邊距。 不允許使用負值。請參閱：CSS 單位。 |
| % | 指定相對于包含元素寬度的百分比內邊距。 |
| initial | 將此屬性設置為其默認值。參閱 initial。 |
| inherit | 從其父元素繼承此屬性。參閱 inherit。 |
技術細節
| 默認值： | auto |
|---|---|
| 繼承性： | 否 |
| 動畫制作： | 不支持。請參閱：動畫相關屬性。 |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.scrollPadding="20px" |
瀏覽器支持
表格中的數字表示首個完全支持該屬性的瀏覽器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
相關頁面
參考：CSS scroll-padding-bottom 屬性
