CSS scroll-padding 屬性
更多“自己嘗試”的例子見下文。
定義和用法
scroll-padding 屬性指定了從容器到子元素捕捉位置的距離。
這意味著當您停止滾動時，滾動將快速調整並在距離容器到焦點子元素的捕捉位置的指定距離處停止。
吸附點是指當您停止滾動時，子元素在容器中吸附到的位置。
注意：在上面的示例中，滾動填充距離設定在所有側面，但只有頂部的滾動填充距離會改變滾動行為，因為 scroll-snap-align 設定為“start”。
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-padding | 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
CSS 語法
scroll-padding: auto|值|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| auto | 預設值。瀏覽器會自動計算內邊距。 |
| length | 以 px、pt、cm 等單位指定滾動填充距離。不允許使用負值。 瞭解長度單位 |
| % | 指定相對於包含塊元素寬度的百分比內邊距。 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
圖片庫
scroll-padding 屬性可用於具有捕捉行為的影像畫廊，將影像推到固定元素下方
#container {
scroll-padding: 30px 0 0 0;
}
設定底部和右側的滾動填充
scroll-padding 屬性可以設定在容器的底部和右側。水平和垂直滾動到下一個元素以檢視效果
#container {
scroll-padding: 0 10px 30px 0;
}
相關頁面
CSS scroll-padding-bottom 屬性： CSS scroll-padding-bottom 屬性
CSS scroll-padding-left 屬性： CSS scroll-padding-left 屬性
CSS scroll-padding-right 屬性： CSS scroll-padding-right 屬性
CSS scroll-padding-top 屬性： CSS scroll-padding-top 屬性
CSS scroll-snap-align 屬性：CSS Scroll-snap-align 屬性
CSS scroll-snap-type 屬性：CSS Scroll-snap-type 屬性
