CSS scroll-padding 属性

Paglilinaw at Paggamit

scroll-padding Ang katangian ay tinatawag na layo sa pagitan ng container at posisyon ng pag-atras ng sub-elemento.

Ito nangangahulugan na kapag tumigil ka sa paggalaw, ang paggalaw ay mabilis na itatago at ititigil sa layo ng spesipikong layo sa container hanggang sa posisyon ng pag-atras ng sub-elemento.

Ang posisyon ng pag-atras ay ang posisyon na nakatutok sa container kung ang anumang bataang elemento ay tumigil sa paggalaw.

scroll-padding Ang katangian ay isang maikling paraan ng mga sumusunod na katangian:

scroll-padding Ang halaga ng mga katangian ay maaaring itatag sa iba't ibang paraan:

Kung ang scroll-padding ay may apat na halaga:

scroll-padding: 15px 30px 60px 90px;
  • Ang layo ng itaas ay 15px
  • Ang layo ng kanan ay 30px
  • Ang layo ng ibaba ay 60px
  • Ang layo ng kaliwa ay 90px

Kung ang scroll-padding ay may tatlong halaga:

scroll-padding: 15px 30px 60px;
  • Ang layo ng itaas ay 15px
  • 左側和右側距離為 30px
  • Ang layo ng ibaba ay 60px

Kung ang scroll-padding ay may dalawang halaga:

scroll-padding: 15px 30px;
  • Ang layo ng itaas at ibaba ay 15px
  • 左側和右側距離為 30px

如果 scroll-padding 屬性有一個值:

scroll-padding: 10px;
  • 所有四個方向的距離均为 10px

要看到 scroll-padding 屬性的效果,必须在子元素上設置 scroll-snap-align 屬性,并在父元素上設置 scroll-paddingscroll-snap-type 屬性。

注意:在下面的例子中,為所有邊設置了滾動內邊距,但由於 scroll-snap-align 設置為 "start",因此只有頂部邊的滾動內邊距改變了滾動行為。

實例

例子 1

設置從容器到吸附位置的滾動內邊距為 20px:

div {
  scroll-padding: 20px;
}

親自試試

例子 2:圖片庫

scroll-padding 屬性可以在具有吸附行為的圖片庫中使用,以將圖片推到固定元素下方:

#container {
  scroll-padding: 30px 0 0 0;
}
固定的顶部元素
Beijing Dancer Wuhan Tulip Hangzhou

親自試試

例子 3:設置底部和右侧的滾動內邊距

scroll-padding 屬性可以在容器的底部和右侧同時設置。水平和垂直滾動到下一個元素以查看效果:

#container {
  scroll-padding: 0 10px 30px 0;
}





親自試試

CSS 語法

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

屬性值

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

以 px、pt、cm 等單位指定滾動內邊距。

不允許使用負值。請參閱:CSS Units

% 指定相對於包含元素寬度的百分比內邊距。
initial 將此屬性設定為其默認值。參閱 initial
inherit 從其父元素繼承此屬性。參閱 inherit

技術細節

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

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

相關頁面

參考:CSS scroll-padding-bottom 属性

參考:CSS scroll-padding-left 属性

參考:CSS scroll-padding-right 属性

參考:CSS scroll-padding-top 属性

參考:CSS scroll-snap-align 属性

參考:CSS scroll-snap-type 属性