CSS scroll-padding-top 属性

Pagsasaayos at paggamit

scroll-padding-top Ang pagtatalaga ng katangian ay inaayos ang layo mula sa itaas ng container hanggang sa posisyon ng pagsusuka ng anumang elemento.

Ang posisyon ng pagsusuka ay ang posisyon ng anumang elemento sa loob ng container na nakaadhesyon sa oras na hindi gumagalaw.

吸附位置由 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction 和 writing-mode 的影响。

注意：此属性仅在吸附位置设置在子元素顶部时有效。

要看到 scroll-padding-top 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-top 和 scroll-snap-type 属性。

实例

例子 1

将滚动内边距设置为从容器顶部到吸附位置的距离为 20px：

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

亲自试一试

例子 2：图片库

scroll-padding-top 属性可用于具有吸附行为的图片画廊，以将图片推到固定元素下方：

#container {
  scroll-padding-top: 30px;
}

亲自试一试

例子 3：在顶部设置滚动内边距

当在两个方向上都设置了吸附行为时，也可以在容器上设置 scroll-padding-top 属性。垂直滚动到下一个元素以查看效果：

#container {
  scroll-padding-top: 30px;
}

亲自试一试

例子 4：吸附位置

要使 scroll-padding-top 属性生效，吸附位置必须设置在子元素的顶部。在此示例中，writing-mode 属性将吸附位置从子元素的顶部更改为右侧。使用这样的代码时，scroll-padding-top 属性将不再起作用：

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS direction Atributo

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性