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-padding
和 scroll-snap-type
屬性。
注意:在下面的例子中,為所有邊設置了滾動內邊距,但由於 scroll-snap-align
設置為 "start",因此只有頂部邊的滾動內邊距改變了滾動行為。
實例
例子 1
設置從容器到吸附位置的滾動內邊距為 20px:
div { scroll-padding: 20px; }
例子 2:圖片庫
scroll-padding
屬性可以在具有吸附行為的圖片庫中使用,以將圖片推到固定元素下方:
#container { scroll-padding: 30px 0 0 0; }





例子 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 属性