Scroll-snap-align - CSS-trikovi

Anonim

scroll-snap-aligndio je CSS modula za pomicanje pomicanja. Pomicanje pomicanja odnosi se na "zaključavanje" položaja okvira za prikaz za određene elemente na stranici dok se pomiče prozor (ili spremnik koji se može pomicati). Zamislite spremnik za pomicanje pomicanja poput stavljanja magneta na vrh elementa koji se lijepi za vrh okvira za prikaz i prisiljava stranicu da se zaustavi pomicanje upravo tamo.

scroll-snap-alignje potrebno svojstvo za element za pomicanje pomicanja unutar spremnika za pomicanje pomicanja. Za više informacija o pomičnim spremnicima pogledajte scroll-snap-typeunos almanaha. scroll-snap-aligngovori preglednik koji dio elementa treba biti usklađen kada je naišao ugriz točka: Treba li element ugriz na start, centerili endmatičnog kontejner koji sadrži scroll-snap-typeimovinu?

Ako želite da se element zaskoči na svom mjestu na početku tog elementa, dajte mu scroll-snap-alignvrijednost poput ove:

/* 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 ovo svojstvo možete navesti do 2 vrijednosti koje predstavljaju osovinu bloka i ugrađene osi. Ako date samo 1 vrijednost, ta će se vrijednost koristiti za obje osi.

Vrijednosti

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

  • none onemogućava priklizavanje pomicanja na elementu
  • start poravnava početak elementa sa snapportom spremnika za pomicanje kada se zaskoči na svoje mjesto
  • end poravnava kraj elementa s kopčom pomičnog spremnika za pomicanje kada se sjedne na svoje mjesto
  • center poravnava središte elementa s kopčom spremnika za pomicanje kada se sjedne na svoje mjesto

Primjer

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

Resursi

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