Scroll-snap-stop - CSS-trikovi

Anonim

scroll-snap-stopdio 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-stopje neobavezno 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-stopomogućuje vam prisiljavanje spremnika za pomicanje pomicanjem da se prikvači na određeni element. Pretpostavimo da ste se kretali unutar spremnika za pucanje i dali ste mu golemi kotačić za okretanje miša. Uobičajeno, preglednik bi dopustio brzini vašeg pomicanja da preleti točke uskočenja sve dok se ne smjesti na točku uskočenja blizu mjesta na kojem bi pomicanje normalno završavalo. Postavljanjem scroll-snap-stopmožete reći pregledniku da se mora zaustaviti na određenom elementu prije nego što dopusti korisniku da ga prođe.

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

Sintaksa

scroll-snap-stop: normal | always;

Vrijednosti

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

  • normal zadana je vrijednost i omogućuje premotavanje elementa bez pucanja
  • always prisilit će preglednik da se prikvači na ovaj element, čak i ako bi pomicanje normalno prolazilo pored ovog elementa

Primjer

Pogledajte primjer olovke scroll-snap-stop
od strane CSS-Tricks (@ css-tricks) na CodePen-u.

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

Imajte na umu da Chrome trenutno možda ne podržava scroll-snap-stop: always;.

Povezano

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Resursi

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