CSS Scroll-Margin Eigenschaft

Definition und Verwendung

scroll-margin Diese Eigenschaft legt die Distanz zwischen dem Anheftungspunkt und dem Container fest.

Das bedeutet, dass sich der Rollvorgang schnell anpasst und an der angegebenen Distanz zwischen dem Anheftungspunkt (snap position) und dem Container stoppt.

Anheftungspunkt bedeutet die Position, an der das Kindenelement im Container haften bleibt, wenn es stoppt, zu rollen.

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

scroll-margin Die Werte der Eigenschaft können auf verschiedene Weise eingestellt werden:

Wenn die Eigenschaft scroll-margin vier Werte hat:

scroll-margin: 15px 30px 60px 90px;
  • Der Abstand zum Dach beträgt 15px
  • Der Abstand zur rechten Seite beträgt 30px
  • Der Abstand zum Boden beträgt 60px
  • Der Abstand zur linken Seite beträgt 90px

Wenn die Eigenschaft scroll-margin drei Werte hat:

scroll-margin: 15px 30px 60px;
  • Der Abstand zum Dach beträgt 15px
  • Die Abstände auf beiden Seiten betragen 30px
  • Der Abstand zum Boden beträgt 60px

Wenn die Eigenschaft scroll-margin zwei Werte hat:

scroll-margin: 15px 30px;
  • Die Abstände oben und unten betragen 15px
  • Die Abstände auf beiden Seiten betragen 30px

Wenn die Eigenschaft scroll-margin einen Wert hat:

scroll-margin: 10px;
  • Die Distanz in alle vier Richtungen beträgt 10px

um zu sehen scroll-margin Eigenschaftseffekte müssen auf dem Kind-Element gesetzt werden scroll-margin und scroll-snap-align Eigenschaft und auf dem übergeordneten Element gesetzt scroll-snap-type Eigenschaft.

Hinweis:In den folgenden Beispielen sind alle Ränder mit Scroll-Rändern ausgestattet, aber aufgrund scroll-snap-align Die Eigenschaft ist auf "start" gesetzt, daher ändert sich nur der obere Scroll-Rand das Scrollverhalten.

Beispiel

Beispiel 1

Stellen Sie die Scroll-Ränder zwischen dem Ankerort und dem Container auf 20px ein:

div {
  scroll-margin: 20px;
}

Versuchen Sie es selbst

Beispiel 2: Bildergalerie

scroll-margin Diese Eigenschaft kann in Bildergalerien mit Haftverhalten verwendet werden. Hier,scroll-margin Lassen Sie den Benutzer sehen, dass sich auf der linken Seite noch ein Bild befindet. Scrollen Sie über das erste Bild, um den Effekt zu sehen:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Peking Tänzer Wuhan Tulpe Hangzhou

Versuchen Sie es selbst

Beispiel 3: Einstellen der Scroll-Ränder am unteren und rechten Rand

können Sie am unteren und rechten Rand des Elements einstellen scroll-margin Eigenschaft. Scrollen Sie horizontal und vertikal zur nächsten Element, um den Effekt zu sehen:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Versuchen Sie es selbst

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
0 Scroll-Ränder sind auf Null gesetzt. Standardwert.
length

Geben Sie die Scroll-Ränder in px, pt, cm oder anderen Einheiten an. Negative Werte sind erlaubt.

Siehe:CSS-Einheiten.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: 0
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.scrollMargin="20px"

Browser-Unterstützung

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Verwandte Seiten

Referenz:CSS scroll-margin-bottom-Eigenschaft

Referenz:CSS scroll-margin-left-Eigenschaft

Referenz:CSS scroll-margin-right-Eigenschaft

Referenz:CSS scroll-margin-top-Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft