CSS scroll-padding-inline-Eigenschaft

Kursempfehlung:

scroll-padding-inline Definition und Verwendung

Eigenschaft die Distanz von Behälter zu Kind-Element definiert, die sich im Ankerort im Inline-Richtung befindet.

bedeutet, dass der Scrollvorgang schnell angepasst und an der angegebenen Distanz zwischen dem Ankerort und dem Behälter gestoppt wird, wenn Sie mit dem Scrollen aufhören. direction 和 writing-mode Die Inline-Richtung bezieht sich auf die Richtung, in die der nächste Zeichencode in Bezug auf die bestehenden Zeichen in einer Zeile positioniert wird. Dies ist auch die Layoutmethode für Tags mit CSS display: inline; (wie <a> und <strong>-Tags) im Text. Die Inline-Richtung hängt von der Schreibrichtung der Sprache ab, z.B. werden arabische Neubuchstaben von rechts nach links angeordnet, so dass die Inline-Richtung von rechts nach links ist, während die Inline-Richtung auf englischen Seiten von links nach rechts ist. Die Inline-Richtung kann durch das CSS-Attribut

definiert.

Der Ankerort bezieht sich auf die Position, an der sich das Kind-Element im Behälter anheften soll, wenn Sie mit dem Scrollen aufhören.Hinweis:scroll-snap-align Dieser Attribut ist nur in der Inline-Richtung gültig

wird nur gültig, wenn die Eigenschaft auf 'start' oder 'end' gesetzt ist.

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

scroll-padding-inline scroll-padding-inline-start

Der Wert der Eigenschaft kann auf verschiedene Weise eingestellt werden:

Wenn der scroll-padding-inline-Attribut zwei Werte hat:

• scroll-padding-inline: 10px 50px;
• Die Distanz zum Anfang beträgt 10px

Die Distanz zum Ende beträgt 50px

Wenn der scroll-padding-inline-Attribut einen Wert hat:

• scroll-padding-inline: 10px;

Die Distanz zum Anfang und zum Ende beträgt 10px scroll-padding-inline Eigenschaftseffekt, muss auf dem Kind-Element eingestellt werden, um zu sehen scroll-snap-align Eigenschaft und muss auf dem übergeordneten Element eingestellt werden scroll-padding-inline 和 scroll-snap-type Eigenschaft.

CSS scroll-padding-block 和 scroll-padding-inline Eigenschaft und CSS-Eigenschaft 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-inline: 20px;
}

亲自试一试

例子 2：图片库

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

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

亲自试一试

例子 3

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

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

亲自试一试

例子 4

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

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

亲自试一试

CSS 语法

scroll-padding-inline: 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