CSS scroll-padding-block-Eigenschaft

Definition und Verwendung

scroll-padding-block Diese Eigenschaft bestimmt den Abstand von der Containerposition zur Haftungsposition des Unterlements in der Blockrichtung.

Das bedeutet, dass sich der Scrollvorgang schnell anpasst und sich in der Blockrichtung am angegebenen Abstand zwischen der Haftungsposition und dem Behälter stoppt.

Die Blockrichtung ist die Richtung, in der das nächste Zeile relativ zur aktuellen Zeilenposition platziert wird, dies ist auch die Layoutmethode von Etiketten mit CSS display: block; (wie <p>- und <div>-Etiketten) auf der Seite. Die Blockrichtung hängt von der Schreibrichtung der Sprache ab, z.B. wird das nächste Zeile in der Mongolischen Sprache von links nach rechts angeordnet, daher ist die Blockrichtung auch von links nach rechts, während die Blockrichtung auf einer englischen Seite nach unten zeigt. Die Blockrichtung kann über das CSS-Attribut writing-mode definiert.

Die Position der Haftung ist die Position, an der das Unterlement im Behälter haftet, wenn Sie dasScrollen beenden.

Hinweis:Diese Eigenschaft ist nur in der Blockrichtung gültig,scroll-snap-align Gültig, wenn die Eigenschaft 'start' oder 'end' eingestellt ist.

scroll-padding-block Die Eigenschaft ist eine Abkürzung für die folgenden Eigenschaften:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Der Wert der Eigenschaft kann auf verschiedene Weise eingestellt werden:

Wenn die Eigenschaft scroll-padding-block zwei Werte hat:

scroll-padding-block: 10px 50px;

• Der Abstand zum Anfang beträgt 10px
• Der Abstand zum Ende beträgt 50px

Wenn die Eigenschaft scroll-padding-block einen Wert hat:

scroll-padding-block: 10px;

• Der Abstand zum Anfang und zum Ende beträgt 10px

um zu sehen scroll-padding-block Der Effekt der Eigenschaft muss auf dem Unterlement eingerichtet werden scroll-snap-align 属性，并在父元素上设置 scroll-padding-block 和 scroll-snap-type 属性。

CSS 的 scroll-padding-block 和 scroll-padding-inline 属性与 CSS 属性 CSS scroll-padding-top-Eigenschaft、scroll-padding-bottom、scroll-padding-left 和 scroll-padding-right 非常相似，但 scroll-padding-block 和 scroll-padding-inline 属性依赖于块方向和行内方向。

实例

例子 1

在块方向上，将滚动内边距设置为从容器到吸附位置的 20px：

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

亲自试一试

例子 2：图片库

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

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

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 vertical-rl 时，块方向上容器和子元素的起始位置从顶部移动到右侧，结束位置从底部移动到左侧。这会影响滚动吸附行为以及 scroll-padding-block 属性的工作方式：

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

Verwandte Seiten

Referenz:CSS scroll-padding-block-end-Eigenschaft

Referenz:CSS scroll-padding-block-start-Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft