Scroll-snap-type - CSS-trikovi

Anonim

scroll-snap-typeNekretnina je dio CSS Pomaknite Snap modula. Pomicanje pomicanja odnosi se na "zaključavanje" položaja okvira za prikaz za određene elemente na stranici dok se pomiče prozor (ili pomični spremnik). Zamislite to kao stavljanje magneta na vrh elementa koji se lijepi za vrh okvira za prikaz i prisiljava stranicu da se prestane pomicati upravo tamo.

Ovo je korisno ako želite zaustaviti preglednik na određenim točkama na stranici. Na primjer: Korisnik koji pregledava fotogaleriju vjerojatno ne želi pomicati pola slike - vjerojatno bi radije da slika "pukne" u pravi položaj dok se kreće. Pomicanje pomicanja daje programerima čisti CSS način za rješavanje ovog ponašanja.

scroll-snap-typeje obavezno svojstvo bilo kojeg spremnika koji se može pomicati u koji želite dodati privezivanje pomicanja. Odgovara na tri pitanja za spremnik za pomicanje:

  1. Koristi li spremnik pucanje pomicanja?
  2. Na kojoj osi - x (vodoravno), y (vertikalno), blok ili redno - treba primijeniti snapping pomicanje?
  3. Kako bi se trebalo ponašati pucanje pomicanja? Je li prisiljeno u 100% slučajeva ili stupa na snagu tek kada se korisnik "dovoljno približi" u položaj za ugriz? O tome više kasnije.
.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 )

Vrijednosti

scroll-snap-type prihvaća sljedeće vrijednosti:

  • none onemogućava pucanje pomicanja.
  • x omogućuje pucanje pomicanja samo duž x osi.
  • y omogućuje pucanje pomicanja samo po osi y.
  • block omogućuje pucanje pomicanja samo po osi bloka.
  • inline omogućuje pucanje pomicanja samo po linijskoj osi.
  • bothomogućuje pucanje pomicanja po obje osi (što možete zamisliti kao xi y, ili inlinei block.
  • mandatory je vrijednost strogosti koja govori pregledniku da uvijek ide u položaj za ugriz kad se ne događa pomicanje.
  • proximityje vrijednost strogosti koja govori pregledniku da prijeđe u položaj ugriza ako se akcija pomicanja prilično približi položaju pucanja. Ako nije prilično blizu, tada preglednik ne bi smio pucati i pomicanje će se ponašati normalno.

Primjer

Pogledajte primjer olovke za pomicanje olovke
pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
69 68 11 * 79 11

Mobitel / tablet

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

Povezano

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Resursi

  • CSS Scroll Snap W3C preporuka kandidata
  • Praktično CSS pomicanje pomicanja
  • Predstavljamo CSS Scroll Snap Points