CSS scroll-padding-inline-start-Eigenschaft

Definition und Verwendung

scroll-padding-inline-start Eigenschaft wird die Distanz von der Startposition des Behälters zur Position der Anziehung des Kind-Elements in der Inline-Richtung angegeben.

Das bedeutet, wenn Sie die Rollbewegung stoppen, wird der Rollvorgang schnell angepasst und an der angegebenen Distanz zwischen der Position der Anziehung und dem Behälter angehalten.

Die Inline-Richtung ist die Richtung, in der der nächste Zeichencode im Vergleich zum aktuellen Zeichencode in der Zeile positioniert wird, das ist auch die Layoutmethode von Beschriftungen mit CSS display: inline; (wie <a> und <strong>-Beschriftungen) im Text. Die Inline-Richtung hängt von der Schreibrichtung der Sprache ab, z.B. werden arabische Neuerz编码 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 durch das CSS-Attribut direction und writing-mode Definition.

Die Position der Anziehung ist die Position, an der der Kind-Element im Behälter angezogen ist, wenn Sie die Rollbewegung stoppen.

Hinweis:Diese Eigenschaft wird nur in der Inline-Richtung eingerichtet scroll-snap-align wenn die Eigenschaft 'start' ist, tritt dies in Kraft.

um zu sehen scroll-padding-inline-start Eigenschaftseffekt, muss auf dem Kind-Element eingestellt werden scroll-snap-align Eigenschaft und muss auf dem übergeordneten Element eingestellt werden scroll-padding-inline-start und scroll-snap-type Eigenschaft.

Beispiel

Beispiel 1

Setzen Sie den Innenabstand für den Scrollbereich in der Inline-Richtung von der Position des Containers bis zur Adhesionsposition auf 20px:

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

Probieren Sie es selbst aus

Beispiel 2: Bildersammlung

scroll-padding-inline-start Diese Eigenschaft kann in Bildergalerien mit Adhesionsverhalten verwendet werden, um Bilder aus dem hinteren festen Element herauszudrücken:

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

Probieren Sie es selbst aus

Beispiel 3

Wenn das Attribut des Container-Elements writing-mode Wenn der Wert der Eigenschaft 'vertical-rl' ist, bewegt sich der Startpunkt des Containers und seiner Kinder in der Inline-Richtung von der Oberseite zur rechten Seite. Dies beeinflusst das Verhalten des Scroll-Adhesions. scroll-padding-inline-start Wie die Eigenschaft funktioniert:

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

Probieren Sie es selbst aus

Beispiel 4

Wenn das Attribut des Container-Elements direction Wenn der Wert der Eigenschaft 'rtl' ist, bewegt sich der Startpunkt des Containers und seiner Kinder in der Inline-Richtung von der rechten Seite zur linken Seite, und der Endpunkt des Containers und seiner Kinder von der rechten Seite nach unten. Dies beeinflusst das Verhalten des Scroll-Adhesions. scroll-padding-inline Wie die Eigenschaft funktioniert:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft