CSS scroll-margin-inline-Eigenschaft

Definition und Verwendung

scroll-margin-inline Die Eigenschaft legt die Entfernung zwischen der Position des Anschlusses und dem Container im INLINE-Verlauf fest.

Das bedeutet, dass sich der Scrollvorgang schnell anpasst und sich im INLINE-Verlauf an der angegebenen Entfernung stoppt, die zwischen der Position des Anschlusses und dem Container liegt.

Die INLINE-Richtung ist die Richtung, in der der nächste Buchstabe relativ zum aktuellen Buchstaben im Text im Zeilenverlauf 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. sind die neuen Zeichen in Arabisch von rechts nach links angeordnet, daher ist die INLINE-Richtung von rechts nach links, während die INLINE-Richtung auf englischen Seiten von links nach rechts ist. Die INLINE-Richtung kann über das CSS-Attribut direction 和 writing-mode Definition.

Die Position des Anschlusses ist die Position, an der das Unterlement im Container haftet, wenn das R滚动 wird.

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

• scroll-margin-inline-start
• scroll-margin-inline-end

Wenn die Eigenschaft scroll-margin-inline zwei Werte hat:

scroll-margin-inline: 20px 70px;

• Der Abstand vom Anfang beträgt 20px
• Der Abstand vom Ende beträgt 70px

Wenn die Eigenschaft scroll-margin-inline einen Wert hat:

scroll-margin-inline: 20px;

• Der Abstand vom Anfang und vom Ende beträgt 20px

Um zu sehen scroll-margin-inline Der Effekt der Eigenschaft muss auf dem Unterlement eingestellt werden scroll-margin-inline 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

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

实例

例子 1

设置在行内方向上，从吸附位置到可滚动容器的距离：

div {
  scroll-margin-inline: 20px;
}

亲自试一试

例子 2

当 <div> 元素的 writing-mode 当属性值设置为 vertical-rl 时，行内方向是向下。结果是元素的起始位置从左侧移动到顶部，元素的结束位置从右侧移动到底部。这也影响了 scroll-margin-inline 属性：

div {
  scroll-margin-inline: 20px 0;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3

当 <div> 元素的 direction 当属性值设置为 rtl 时，行内方向是从右到左。结果是元素的起始位置从左侧移动到右侧，元素的结束位置从右侧移动到左侧。这也影响了 scroll-margin-inline 属性：

div {
  scroll-margin-inline: 0 20px;
  direction: rtl;
}

亲自试一试

CSS 语法

scroll-margin-inline: 0|value|initial|inherit;

属性值

技术细节

浏览器支持

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

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS scroll-margin-inline-end-Eigenschaft

Referenz:CSS scroll-margin-inline-start-Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft