CSS scroll-snap-align-Eigenschaft

Definition und Verwendung

scroll-snap-align Die Eigenschaft legt fest, dass sich das Element an der Fokusposition anheften soll, wenn Sie das Scrollen stoppen

Um das Verhalten desScrollsnapping zu realisieren, muss die Eigenschaft auf den Kindelementen festgelegt werden scroll-snap-align Eigenschaft und auf dem übergeordneten Element festlegen scroll-snap-type Eigenschaft.

Beispiel

Beispiel 1

Wenn der Benutzer das Scrollen stoppt, heftet der nearest Element sich an den Mittelpunkt der Position:

div {
  scroll-snap-align: center;
}

Versuchen Sie es selbst

Beispiel 2: Bildergalerie

scroll-snap-align Diese Eigenschaft ist besonders gut geeignet für die Bildergalerie-Scrollansicht. Hier ist die Scrollrichtung horizontal, und die Anheftungsausrichtung ist zentriert. Wenn der Benutzer den Scrollbalken loslässt, wird das nächstgelegene Bild in die Mitte des scrollbaren Bereichs angeheftet. Versuchen Sie, ein Bild zu klicken und dann mit den Pfeiltasten links und rechts zu scrollen, um sie zu durchsuchen:

#container > img {
  scroll-snap-align: none center;
}
Peking Tänzer Wuhan Tulpe Hangzhou

Versuchen Sie es selbst

Alley bridge in jungle mountains man with camera Cinque Terre

Beispiel 3: Vertikale Ausrichtung der Anheftungsposition in der Blockrichtung

Wenn der vertikale Scrollen aktiv ist,scroll-snap-align Die Eigenschaft kann auch auf den Anfangsposition der Elemente in der Blockrichtung gesetzt werden:

#container > div {
  scroll-snap-align: start none;
}

Versuchen Sie es selbst

CSS-Syntax

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Eigenschaftswert

Wert Beschreibung
none Keine Anheftungseffekte. Standardwert.
start Anheftung am Anfang der Elementzentrale in der x- und y-Achse.
end Anheftung am Ende der Elementzentrale in der x- und y-Achse.
center Anheftung an der Mitte der Elementzentrale in der x- und y-Achse.
block inline Doppelt-Wert-Syntax. Der erste Wert gibt die Anheftungsmethode in der Blockrichtung an, der zweite Wert gibt die Anheftungsmethode in der Inline-Richtung an.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

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

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionen der Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Verwandte Seiten

Bezugnahme:CSS scroll-snap-type-Eigenschaft