Scroll-snap-type - CSS-triki

Anonim

scroll-snap-typeLastnost je del CSS Pomaknite Snap modula. 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). Pomislite na to, kot da na magnet postavite magnet na element, ki se drži vrha vidnega polja in prisili stran, da se tam neha pomikati.

To je koristno, če želite ustaviti brskalnik na določenih točkah strani. Na primer: uporabnik, ki brska po galeriji fotografij, verjetno ne želi, da se pomakne do polovice mimo slike - verjetno bi raje, da se slika med pomikanjem "zaskoči" v pravi položaj. Snapping drsenje daje razvijalcem povsem CSS način za obvladovanje tega vedenja.

scroll-snap-typeje potrebna lastnost katerega koli pomičnega vsebnika, ki mu želite dodati pripenjanje drsenja. Odgovori na tri vprašanja za pomični vsebnik:

  1. Ali vsebnik uporablja drsenje drsenja?
  2. Na kateri osi - x (vodoravno), y (navpično), blok ali vrstici - naj se uporabi drsenje drsenja?
  3. Kako naj se obnaša drsenje drsenja? Ali je prisiljen v 100% primerov ali začne veljati šele, ko se uporabnik »dovolj blizu« postavi v položaj? Več o tem kasneje.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintaksa

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Vrednote

scroll-snap-type sprejema naslednje vrednosti:

  • none onemogoči drsenje drsenja.
  • x omogoča drsenje drsenja samo po osi x.
  • y omogoča drsenje drsenja samo po osi y.
  • block omogoča drsenje drsenja samo po osi bloka.
  • inline omogoča drsenje drsenja samo po vrstni osi.
  • bothomogoča drsenje drsenja po obeh oseh (kar si lahko omislite kot xin y, ali inlinein block.
  • mandatory je vrednost strogosti, ki brskalniku sporoča, da se vedno premakne v položaj, kjer se pomikanje ne zgodi.
  • proximityje vrednost strogosti, ki brskalniku sporoča, naj se premakne v položaj snap, če se drsno dejanje približa položaju snap. Če ni precej blizu, potem brskalnik ne sme zaskočiti in drsenje se bo obnašalo normalno.

Primer

Glejte primer Pen-scroll-snap type
z CSS-Tricks (@ css-tricks) na CodePen.

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-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Viri

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