CSS scroll-padding-inline 屬性

❮ 上一個完整 CSS 參考下一個 ❯

示例

設定容器到子元素的對齊點的內聯方向上的滾動內邊距為 20px

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

自己動手試一試 »

更多“自己嘗試”的例子見下文。

定義和用法

scroll-padding-inline 屬性指定了內聯方向上，從容器到子元素的對齊點之間的距離。

這意味著當您停止滾動時，滾動會快速調整並停止在對齊點和容器之間的指定距離處。

內聯方向是指新字元相對於行中現有字元的位置，這也是 CSS display: inline; 的標籤（如 <a> 和 <strong> 標籤）在文字中佈局的方式。內聯方向取決於書寫語言，例如阿拉伯語，新字元從右到左佈局，因此內聯方向是從右到左；而英文頁面的內聯方向是從左到右。內聯方向可以透過 CSS 屬性 direction 和 writing-mode 來定義。

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

注意： 此屬性僅在 scroll-snap-align 屬性設定為內聯方向的 'start' 或 'end' 時才有效。

scroll-padding-inline 屬性是以下屬性的簡寫屬性

scroll-padding-inline 屬性的值可以以下列方式設定

如果 scroll-padding-inline 屬性有兩個值

scroll-padding-inline: 10px 50px;
- 起始距離為 10px
- 結束距離為 50px

如果 scroll-padding-inline 屬性只有一個值

scroll-padding-inline: 10px;
- 起始和結束距離都為 10px

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

CSS 的 scroll-padding-block 和 scroll-padding-inline 屬性與 CSS 屬性 scroll-padding-top、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 屬性取決於塊和內聯方向。

預設值	auto
繼承	no
可動畫	否。閱讀關於可動畫屬性
版本	CSS3
JavaScript 語法	object.style.scrollPaddingInline="20px" 嘗試一下

瀏覽器支援

表中的數字指定了完全支援該屬性的第一個瀏覽器版本。

屬性
scroll-padding-inline	69.0	79.0	68.0	15.0	56.0

CSS 語法

scroll-padding-inline: auto|值|initial|inherit;

屬性值

值	描述
auto	預設值。瀏覽器會自動計算內邊距。
length	指定 px、pt、cm 等單位的 scroll-padding-inline。不允許負值。閱讀有關長度單位的說明
%	指定相對於包含塊元素寬度的百分比內邊距。
initial	將此屬性設定為其預設值。閱讀關於initial
inherit	從其父元素繼承此屬性。閱讀關於inherit