CSS scroll-margin 屬性

定義和用法

scroll-margin 屬性指定了吸附位置與容器之間的距離。

這意味著當你停止滾動時，滾動會快速調整并停止在吸附位置（snap position）與容器之間指定的距離處。

吸附位置是指子元素在停止滾動時，在容器中吸附到位的位置。

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-snap-align 屬性設置為 "start"，因此只有頂部的滾動外邊距改變了滾動行為。

實例

例子 1

設置吸附位置與容器之間的滾動外邊距為 20px：

div {
  scroll-margin: 20px;
}

親自試一試

例子 2：圖片庫

scroll-margin 屬性可以用在具有吸附行為的圖片庫中。在這里，scroll-margin 讓用戶可以看到左側還有一張圖片。滾動過第一張圖片可查看效果：

#container > img {
  scroll-margin: 0 0 0 30px;
}
Beijing Dancer Wuhan Tulip Hangzhou

親自試一試

例子 3：設置底部和右側的滾動外邊距

可以在元素的底部和右側設置 scroll-margin 屬性。水平和垂直滾動到下一個元素可查看效果：

#container > div {
  scroll-margin: 0 10px 30px 0;
}





親自試一試

CSS 語法

scroll-margin: 0|value|initial|inherit;

屬性值

值 描述
0 滾動外邊距為零。默認值。
length

指定以 px、pt、cm 等為單位的滾動外邊距。允許使用負值。

請參閱：CSS 單位。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： 0
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.scrollMargin="20px"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

相關頁面

參考：CSS scroll-margin-bottom 屬性

參考：CSS scroll-margin-left 屬性

參考：CSS scroll-margin-right 屬性

參考：CSS scroll-margin-top 屬性

參考：CSS scroll-snap-align 屬性

參考：CSS scroll-snap-type 屬性