Drsenje-snap-poravnava - CSS-triki

Anonim

scroll-snap-alignje del modula za pomikanje po pomika CSS. Hitro drsenje se nanaša na "zaklepanje" položaja vidnega polja na določene elemente na strani, ko se pomika okno (ali pomični vsebnik). Zamislite si vsebnik za pomikanje, kot da bi magnet postavili na element, ki se drži vrha vidnega polja in prisilil stran, da se tam neha pomikati.

scroll-snap-alignje potrebna lastnost elementa za pomikanje v pomičnem vsebniku. Za več informacij o pomičnih posodah glejte scroll-snap-typevnos almanaha. scroll-snap-alignpove, brskalnik, kateri del elementa mora biti usklajena, ko je zlom točka naletel: Ali je treba element snap na start, centerali endnadrejenega posode, ki vsebuje scroll-snap-typepremoženje?

Če želite, da se element zaskoči na začetku tega elementa, mu dajte tako scroll-snap-alignvrednost:

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

Sintaksa

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

Za to lastnost lahko podate do 2 vrednosti, ki predstavljata os bloka in vrstice. Če navedete samo 1 vrednost, bo ta vrednost uporabljena za obe osi.

Vrednote

scroll-snap-align sprejema naslednje vrednosti:

  • none onemogoči drsenje drsenja po elementu
  • start poravna začetek elementa s snapportom pomičnega vsebnika, ko se zaskoči na svoje mesto
  • end poravna konec elementa s snapportom pomičnega vsebnika, ko se zaskoči na svoje mesto
  • center poravna sredino elementa s snapportom pomičnega vsebnika, ko se zaskoči na svoje mesto

Primer

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
69 68 11 * 79 11.

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 85 81 11,0-11,2

Sorodno

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

Viri

  • Priporočilo kandidata za pomikanje po CSS W3C
  • Praktično CSS Scroll Snapping
  • Predstavljamo točke pomikanja CSS