Sifat scroll-padding-left CSS

Definisi dan penggunaan

scroll-padding-left Atribut menentukan jarak dari sisi kiri kontainer ke lokasi penyerapan elemen.

Lokasi penyerapan adalah lokasi dimana elemen anak di dalam kontainer yang diserap saat berhenti menggulir.

Lokasi penyerapan ditentukan oleh scroll-snap-align pengaturan atribut, tetapi mungkin juga terpengaruh oleh atribut CSS direction 和 writing-mode pengaruh.

Perhatian:Pertubuhan ini hanya berlaku apabila lokasi penyerapan diset di sebelah kiri elemen anak.

要看到 scroll-padding-left 屬性的效果，必須在子元素上設置 scroll-snap-align 屬性，並在父元素上設置 scroll-padding-left 和 scroll-snap-type 屬性。

實例

例子 1

將滾動內邊距設定為從容器左側到吸附位置的距離為 20px：

div {
  scroll-padding-left: 20px;
}

親自試試

例子 2：圖片庫

scroll-padding-left 屬性可用於具有吸附行為的圖片庫，以將圖片從固定元素後面推入視圖中：

#container > img {
  scroll-padding-left: 30px;
}

親自試試

例子 3：在左側設置滾動內邊距

當在兩個方向上都設置了吸附行為時，也可以在容器上設置 scroll-padding-left 屬性。水平滾動到下一個元素以查看效果：

#container > div {
  scroll-padding-left: 30px;
}

親自試試

例子 4：吸附位置

要使 scroll-padding-left 屬性生效，吸附位置必須設定在子元素的左側。在此例中，direction 屬性的值 'rtl' 將吸附位置從子元素的左側更改为右側。使用這樣的代碼時，scroll-padding-left 屬性將不再起作用：

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

親自試試

CSS 語法

scroll-padding-left: auto|value|initial|inherit;

屬性值

值 描述
auto 默認值。瀏覽器計算內邊距。
length

以 px、pt、cm 等單位指定 scroll-padding-left。

不允許使用負值。請參閱：Unit CSS。
% 指定包含元素寬度的百分比作為內邊距。
initial 將此屬性設定為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

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

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

頁面相關

Rujukan：Sifat direction CSS

Rujukan：Sifat scroll-snap-align CSS

Rujukan：Sifat scroll-snap-type CSS

Rujukan：属性 writing-mode CSS