CSS scroll-snap-type-Eigenschaft

Definition und Verwendung

scroll-snap-type Die Eigenschaft legt fest, wie ein Element sich an den Fokus anheften und in welche Richtung es sich anheften soll, wenn Sie das Scrollen stoppen.

Um das ScrollSnap-Verhalten zu erreichen, muss auf dem Elternelement gesetzt werden. scroll-snap-type Eigenschaft und setzen Sie sie auf den Kindelementen scroll-snap-align Eigenschaft.

Beispiel

Beispiel 1

ScrollSnap-Funktion auf der x-Achse einrichten:

#container {
  scroll-snap-type: x mandatory;
}

Versuchen Sie es selbst aus

Beispiel 2: Adsorptionseffekte auf der x- und y-Achse setzen

ScrollSnap-Effekte auf der x- und y-Achse setzen. scroll-snap-type Eigenschaft:

#container > div {
  scroll-snap-type: both mandatory;
}





Versuchen Sie es selbst aus

Beispiel 3: Näherungsadsorption

ScrollSnap-Effekte mit Nahverhalten auf der x- und y-Achse setzen. scroll-snap-type Eigenschaft. Wenn die Scroll-Bewegung genau in der Mitte zwischen zwei Elementen endet, wird nicht angeheftet:

#container > div {
  scroll-snap-type: both proximity;
}





Versuchen Sie es selbst aus

CSS-Syntax

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Eigenschaftswert

Wert Beschreibung
none Keine ScrollSnap-Effekte. Standardwert.
x ScrollSnap-Effekte auf der x-Achse setzen.
y ScrollSnap-Effekte auf der y-Achse setzen.
block ScrollSnap-Effekte in der Block-Richtung setzen.
inline ScrollSnap-Effekte in der Inline-Richtung setzen.
both ScrollSnap-Effekte auf der x- und y-Achse setzen.
mandatory Nach Abschluss derScroll-Bewegung bewegt sich der Scrollcursor automatisch zum Ankerpunkt.
proximity

Ähnlich wie mandatory, aber nicht so streng.

Nach Abschluss derScroll-Bewegung bewegt sich der Scrollcursor automatisch zum Ankerpunkt, aber zwischen den Ankerpunkten gibt es einen Bereich ohne Ankerwirkung.

Abhängig von den Browser-Parametern.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe: initial.
inherit Diese Eigenschaft wird von seinem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: none
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.scrollSnapType="x mandatory"

Browser-Unterstützung

Tabelleinheiten stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

Verwandte Seiten

Referenz:CSS scroll-snap-align-Eigenschaft