CSS scroll-snap-align egenskap
- Föregående sida scroll-padding-top
- Nästa sida scroll-snap-stop
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; }
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; }





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; }
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
- Föregående sida scroll-padding-top
- Nästa sida scroll-snap-stop