CSS scroll-snap-align egenskab

Definition og brug

scroll-snap-align Egenskaben angiver, hvor elementet skal fæste sig, når du stopper med at rulle

For at opnå scroll-snap adfærd, skal du sætte egenskaben på underelementerne scroll-snap-align egenskab, og sæt den på forældrelementet scroll-snap-type egenskab.

eksempel

eksempel 1

Når brugeren stopper med at rulle, gør det nærmeste elementet snap-fasts til midten:

div {
  scroll-snap-align: center;
}

prøv det selv

eksempel 2: Billedgalleri

scroll-snap-align egenskaben er meget velegnet til at bruge til at rulle gennem en billedgalleri. Her er rulningsretningen vandret, snap-centreringen er centreret. Når brugeren slipper rulningsbjælken, vil det nærmeste billede snap-fasts til midten af den rullebare region. Prøv at klikke på et billede, og brug derefter venstre og højre piletaster til at rulle gennem dem:

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

prøv det selv

alley bridge in jungle mountains man with camera Cinque Terre

eksempel 3: Vertikal centreret rulningssnap-position i blokretningen

når der rulles lodretscroll-snap-align egenskaben kan også indstilles til elementets startposition i blokretningen:

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

prøv det selv

CSS syntaks

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

egenskabsværdi

værdi beskrivelse
none Ingen rulningssnap-effekt. Standardværdi.
start Elementet snap-fasts ved starten i x- og y-aksen.
end Elementet snap-fasts ved enden i x- og y-aksen.
center Elementet centreres i x- og y-aksen ved rulningssnap.
block inline dobbeltværdig语法. Den første værdi specificerer fastsættelsesmetoden i blokretningen, den anden værdi specificerer fastsættelsesmetoden i rækkevidderetningen.
initial Sæt denne egenskab til dens standardværdi. Se initial.
inherit Arve denne egenskab fra sin forældrelement. Se inherit.

tekniske detaljer

standardværdi: none
inheritans: nej
animation production: ikke understøttet. Se:animation-relaterede egenskaber.
version: CSS3
JavaScript syntaks: object.style.scrollSnapAlign="start"

browserunderstøttelse

Tallene i tabellen repræsenterer den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

relaterede sider

reference:CSS scroll-snap-type egenskab