CSS scroll-snap-align egenskap

Definition och användning

scroll-snap-align Egenskapen specificerar att elementet ska fästa vid fokuspunkten när du stoppar med att rulla.

För att uppnå scroll-snap-beteende måste egenskapen sättas på underelementen scroll-snap-align egenskap och sätta på föräldrelementet scroll-snap-type egenskapen.}}

Exempel

Exempel 1

När användaren stoppar med att rulla, fäster den närmaste elementet till mittenpositionen:

div {
  scroll-snap-align: center;
}

Prova själv

Exempel 2: Bildgalleri

scroll-snap-align Egenskapen är mycket lämplig för att använda vid rullande genom bildgalleri. Här är rullriktningen horisontell, fästningsjusteringen är centrerad. När användaren släpper rulllisten, fäster det närmaste bilden till mitten av den rullbara regionen. Försök att klicka på en bild och använd vänster och höger piltangent för att bläddra genom dem:

#container > img {
  scroll-snap-align: none center;
}
Beijing Dansare Wuhan Tulpan Hangzhou

Prova själv

alley bridge in jungle mountains man with camera Cinque Terre

Exempel 3: Vertikal centrering av fästpositioner i blockriktningen

När vertikal rullning skerscroll-snap-align Egenskapen kan också sättas till elementets startposition i blockriktningen:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
none Ingen rullfästeffekt. Standardvärde.
start Elementet fäster till början av elementet på axlarna x och y.
end Elementet fäster till slutet av elementet på axlarna x och y.
center Elementet fäster till mitten av elementet på axlarna x och y.
block inline Bivalvsnotation. Den första värdet specificerar fästmetoden i blockriktningen, den andra värdet specificerar fästmetoden i inline-riktningen.
initial Sätt denna egenskap till dess standardvärde. Se initial.
inherit Inherriter denna egenskap från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: none
Arv: Nej
Animationstillverkning: Stöds inte. Se:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.scrollSnapAlign="start"

Webbläsarstöd

Tal i tabellen representerar den första webbläsarversion som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Relaterade sidor

Referens:CSS scroll-snap-type egenskap