CSS scroll-margin 屬性
更多“自己嘗試”的例子見下文。
定義和用法
scroll-margin 屬性指定吸附位置與容器之間的距離。
這意味著當您停止滾動時，滾動會快速調整並停止在對齊點和容器之間的指定距離處。
吸附點是指當您停止滾動時，子元素在容器中吸附到的位置。
注意： 在上面的示例中，scroll-margin 設定在所有側面，但由於設定了 scroll-snap-align 屬性為“start”，因此只有頂部邊距的滾動行為會發生變化。
scroll-margin 屬性是以下屬性的簡寫形式：
scroll-margin 屬性的值可以以多種方式設定：
如果 scroll-margin 屬性有四個值：
- scroll-margin: 15px 30px 60px 90px;
- 頂部距離為 15px
- 右側距離為 30px
- 底部距離為 60px
- 左側距離為 90px
如果 scroll-margin 屬性有三個值：
- scroll-margin: 15px 30px 60px;
- 頂部距離為 15px
- 左右距離為 30px
- 底部距離為 60px
如果 scroll-margin 屬性有兩個值：
- scroll-margin: 15px 30px;
- 上下距離為 15px
- 左右距離為 30px
如果 scroll-margin 屬性有一個值：
- scroll-margin: 10px;
- 所有四個距離均為 10px
要檢視 scroll-margin 屬性的效果，必須在子元素上設定 scroll-margin 和 scroll-snap-align 屬性，並在父元素上設定 scroll-snap-type 屬性。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| scroll-margin | 69.0 | 79.0 | 90.0 | 14.1 | 56.0 |
CSS 語法
scroll-margin: 0|值|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| 0 | scroll-margin 為零。這是預設值 |
| length | 指定 scroll-margin，單位可以是 px、pt、cm 等。允許使用負值。 閱讀有關長度單位的資訊 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
圖片庫
scroll-margin 屬性可用於具有吸附行為的圖片庫。在此示例中，scroll-margin 使您可以看到左側有一張圖片。滾動到第一張圖片之後，您將看到效果。
#container > img {
scroll-margin: 0 0 0 30px;
}
在底部和右側設定 scroll-margin
scroll-margin 屬性可以同時設定在元素的底部和右側。向水平和垂直方向滾動到下一個元素以檢視效果。
#container > div {
scroll-margin: 0 10px 30px 0;
}
相關頁面
CSS scroll-margin-bottom 屬性： CSS scroll-margin-bottom 屬性
CSS scroll-margin-left 屬性： CSS scroll-margin-left 屬性
CSS scroll-margin-right 屬性： CSS scroll-margin-right 屬性
CSS scroll-margin-top 屬性： CSS scroll-margin-top 屬性
CSS scroll-snap-align 屬性：CSS Scroll-snap-align 屬性
CSS scroll-snap-type 屬性：CSS Scroll-snap-type 屬性
