CSS scroll-padding-inline-end-Eigenschaft

Definition und Verwendung

scroll-padding-inline-end Dieses Attribut gibt die Entfernung zwischen dem Ende des Containers und der Ausrichtungsposition des Nachfolgers in der Richtung des Zeilensatzes an.

Das bedeutet, dass der Scrollvorgang schnell angepasst und an der angegebenen Entfernung zwischen dem Ausrichtungsposition und dem Container gestoppt wird.

Die Richtung des Zeilensatzes ist die Richtung, in der der nächste Buchstabe im Vergleich zum aktuellen Buchstaben im Textzeilenverlauf positioniert wird. Dies ist auch die Layoutweise von Beschriftungen mit CSS display: inline; (wie <a> und <strong>-Beschriftungen) im Text. Die Richtung des Zeilensatzes hängt von der Schreibrichtung der Sprache ab; zum Beispiel sind neue Zeichen in Arabisch von rechts nach links angeordnet, daher ist die Richtung des Zeilensatzes von rechts nach links, während die Richtung des Zeilensatzes auf englischen Seiten von links nach rechts ist. Die Richtung des Zeilensatzes kann durch das CSS-Attribut direction 和 writing-mode Definition.

Die Ausrichtung der Position bezieht sich auf den Ort, an dem der Nachfolger im Container ausgerichtet ist, wenn Sie mit dem Scrollen aufhören.

Beachtung:Dieses Attribut ist nur in scroll-snap-align Dieses Attribut ist nur wirksam, wenn die Richtung des Zeilensatzes auf 'end' eingestellt ist.

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

实例

例子 1

设置从容器末端到对齐位置的行内方向滚动内边距为 20px：

div {
  scroll-padding-inline-end: 20px;
}

亲自试一试

例子 2：图片库

scroll-padding-inline-end 属性可以在具有对齐行为的图片画廊中使用，以将图片从固定元素后面推出：

#container {
  scroll-padding-inline-end: 30px;
}

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上容器和子元素的起始位置从左侧移动到顶部，而末端从右侧移动到底部。这会影响滚动对齐行为以及 scroll-padding-inline-end 属性的工作方式：

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上容器和子元素的末端从右侧移动到左侧。这会影响滚动对齐行为以及 scroll-padding-inline-end 属性的工作方式：

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

Referenz:CSS direction-Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft