Uvod u CSS Scroll Snap Points

CSS modul za pomicanje je web standard koji nam daje određenu kontrolu pomicanjem po web-stranici tako da možemo natjerati korisnike da se pomaknu na određene dijelove stranice, a ne samo bilo gdje na njemu.

pomicanje je jedna od najuspješnijih radnji na web-lokaciji. Preglednici, tijekom godina, imaju poboljšali su svoje performanse pomicanja kako bi se prilagodila agilnoj snazi ​​prsta korisnika. I, programeri su koristi se kreativno pomicanje kako bi se postiglo bolje korisničko iskustvo.

Međutim, kada je u pitanju korelacija između kodiranje i pomicanje, činilo se da samo JavaScript ima bilo kakvu kontrolu nad potonjim. To je bilo tako dugo vremena, ali s uvođenje scroll snap točaka, CSS je počeo nadoknađivati.

Pomicanje bez točaka pomicanja

Obično se ne krećemo vrlo sporo, osobito na telefonima. Što se brže pomičete, imate manje kontrole gdje ćete na zaslonu završiti kada ste prestali pomicati.

Zamislite da se pomičete kroz niz slika proizvoda na web-lokaciji ili u galeriji fotografija ili slajdova na mreži. Ono što želite u takvim aplikacijama je to pogledajte cijeli proizvod, fotografiju ili slajd svaki put kada se pomičete. Ne samo a dio slike, fotografije ili slajda proizvoda.

Na primjer, na donjoj demo verziji možete vidjeti samo kad korisnik prestane s pomicanjem vidljiva je polovica slike na dnu zaslona. Međutim, većina korisnika radije će vidjeti posljednju sliku u potpunosti.

Pomicanje s točkama pomicanja

Ovdje donosimo CSS pomicanje točaka privlačenja. Ime je samo po sebi razumljivo; to je CSS standard koji nam omogućuje stavite na mjesto tijekom pomicanja.

Tamo su pet CSS svojstava koji čine ovaj standard:

1. pomaknite-ugriz tipa
2. pomaknite-snap-bodova-x
3. pomaknite-snap-bodova-y
4. pomaknite-snap-koordinata
5. pomaknite-snap-odredište

Podrška za preglednik

Svojstva potreba -WebKit i -ms prefiksi za relevantne preglednike. Od pisanja ovog članka CSS scroll snap nije podržan u Chromeu i Operi.

Imajte na umu da će agenti korisnika u skoroj budućnosti vjerojatno ispustiti posljednja četiri svojstva. umjesto, nova svojstva, naime pomaknite-snap-align, pomaknite-snap-marža, i pomaknite-snap-padding, može se stvoriti, kako je definirano u ovoj specifikaciji.

Međutim, hoće imaju sličnu svrhu kao nekadašnja svojstva. Trenutno, bivši skup svojstava će raditi sasvim u redu.

Nekretnine

Trebaš dodajte pomaknite-ugriz tipa na spremnik za pomicanje (element kontejnera čija su djeca preplavljena dok se pomiče). Ona određuje strogost hitne akcije. Može imati tri vrijednosti:

1. obavezan - kada se pomicanje završi, pomicanje će uskočiti na odgovarajuću točku usklikanja
2. neposredna blizina - manje strogi od obavezan; hoće ovisi o prosudbi UA hoće li se element ugasiti na danoj točki privitka
3. nijedan - nije učinjeno nikakvo pucketanje

pomaknite-snap-bodova-x i pomaknite-snap-bodova-y nekretnine pripadaju spremniku za pomicanje, isto. Oni se odnose na točke na osi x i y gdje će postojati točke ukliještenja. Njihova vrijednost je koje daje ponoviti() funkcija. Na primjer, ako želite dodati točke pripajanja duž x-osi u intervalu od 100piks morate koristiti scroll-snap-points-x: repeat (100px) Pravilo.

pomaknite-snap-odredište Svojstvo se također dodaje spremniku za pomicanje. To definira koordinatu na spremniku gdje leži ugriz. Upravo je na tom odredištu gdje djeca spremnika sjedaju na svoje mjesto kada se pomiču.

Možete upotrijebiti pomaknite-snap-koordinata u vezi s pomaknite-snap-odredište. Morate ga dodati dječjim elementima spremnika. To definira koordinate podređenih elemenata, koji će se uskladiti s odredišnim koordinatama njihovog skrol kontejnera kada korisnik pomiče zaslon.

Napominjemo da ne morate koristiti sva svojstva odjednom. Samo pomaknite-ugriz tipa je obvezno. Uz to, možete definirati pojedinačne točke pripajanja ili koristiti kombinaciju odredišne ​​koordinate.

Primjer koda

Evo primjera isječka koda za tipični pomični spremnik, s pomicanje u okomitom smjeru i neke slike unutra. Izlazi demo koji možete pronaći na početku ovog posta.

 div širina: 300px; visina: 300px; overflow: auto;… div> img širina: 250px; visina: 150px;… 

Sad mi dodajte nekoliko točaka privlačenja u kontejner za pomicanje:

 div širina: 300px; preljev: auto; scroll-snap-points-y: ponovite (150px); scroll-snap-type: obvezno;  

U nastavku možete vidjeti kako izgleda izlaz Dodane su točke CSS-a. Primijetite kad se pomicanje zaustavi dok je donja slika samo djelomično vidljiva pojavljuje se puna slika nakon što scrollport sjedne na točku prebacivanja iznad nje.