CSS scroll-padding-top-Eigenschaft

Definition und Verwendung

scroll-padding-top Die Eigenschaft legt den Abstand von der Oberseite des Behälters bis zur Absorptionsposition des Unterelements fest.

Die Absorptionsposition bezieht sich auf den Ort, an dem der Unterelement im Behälter angezogen ist, wenn das Rutschen gestoppt wird.

吸附位置由 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;

属性值

技术细节

浏览器支持

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

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft