CSS scroll-margin-inline-start-Eigenschaft

Definition und Verwendung

scroll-margin-inline-start Das Attribut legt die Distanz zwischen der Anziehungskraftstelle und dem Behälter im Zeilenrichtungsmodus fest.

Das bedeutet, dass sich der Scrollvorgang schnell anpasst, wenn Sie das Rutschen stoppen, und an der Anziehungskraftstelle des Anfangs des Kindelements und des Behälters im Zeilenrichtungsmodus auf der angegebenen Distanz anhält.

Die Richtung der Zeile bezieht sich auf die Position, in der der nächste Zeichencode relativ zum aktuellen Zeichencode in der Zeile platziert wird. Dies ist auch die Layoutweise von Etiketten mit CSS display: inline; (wie <a> und <strong>-Etiketten) im Text. Die Richtung der Zeile hängt von der Schreibsprache ab, z.B. sind neue Zeichen in Arabisch von rechts nach links angeordnet, daher ist die Richtung der Zeile von rechts nach links, während die Richtung der Zeile auf englischen Seiten von links nach rechts ist. Die Richtung der Zeile kann durch das CSS-Attribut direction and writing-mode Definition.

The adhesive position refers to the position where the child elements are吸附到位 in the container when you stop scrolling.

Note:This property only works in scroll-snap-align property only takes effect when the inline direction is set to 'start'.

CSS's scroll-margin-inline and scroll-margin-block properties are similar to the CSS properties CSS scroll-margin-top-Eigenschaft,scroll-margin-bottom,scroll-margin-left and scroll-margin-right are very similar, but scroll-margin-block and scroll-margin-inline The property depends on the block direction and inline direction.

Instance

Example 1

Set the distance from the adhesive position to the scrollable container on the inline direction:

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

Try It Yourself

Example 2

When the writing-mode When the property value is set to vertical-rl, the inline direction is downward. The result is that the starting position of the element moves from the left to the top:

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

Try It Yourself

Example 3

When the direction When the property value is set to rtl, the inline direction is from right to left. The result is that the starting position of the element is adjusted from the left (relative to the original direction, which is still starting on the right, but here 'left' refers to the left of the original default direction (ltr)):

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

Try It Yourself

CSS Syntax

inset-inline-start: 0|value|initial|inherit;

Property Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft