Bla-snap-juster - CSS-triks

Anonim

scroll-snap-aligner en del av CSS Scroll Snap Module. Rulling snapping refererer til å "låse" posisjonen til visningsområdet til spesifikke elementer på siden når vinduet (eller en rullbar beholder) rulles. Tenk på en rullesnekkende beholder som å sette en magnet på toppen av et element som holder seg til toppen av visningsområdet og tvinger siden til å slutte å rulle akkurat der.

scroll-snap-aligner en påkrevd egenskap for et rulle-snapping element i en rulle-snapping container. For mer informasjon om rullesnippere, se scroll-snap-typealmanakkoppføringen. scroll-snap-alignforteller leseren som en del av et element bør være på linje når det oppstår et blunk Punkt: Bør elementet festes til start, centereller endav den overordnede beholder som inneholder scroll-snap-typeeiendom?

Hvis du vil at et element skal smekke på plass i begynnelsen av det elementet, kan du gi det en scroll-snap-alignverdi slik:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Syntaks

scroll-snap-align: ( none | start | end | center )(1,2)

Du kan angi opptil 2 verdier for denne egenskapen, som representerer henholdsvis blokk- og inline-aksene. Hvis du bare gir 1 verdi, vil den verdien brukes for begge aksene.

Verdier

scroll-snap-align aksepterer følgende verdier:

  • none deaktiverer rulle snapping på elementet
  • start justerer elementets start med rullebeholderens snapport når den festes på plass
  • end justerer elementets ende med rullebeholderens snapport når den festes på plass
  • center justerer elementets senter med rullebeholderens snapport når det festes på plass

Eksempel

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
69 68 11 * 79 11

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

I slekt

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Ressurser

  • CSS Scroll Snap W3C kandidatanbefaling
  • Praktisk CSS Scroll Snapping
  • Vi presenterer CSS Scroll Snap Points