Ievads CSS Scroll Snap punktos

The CSS Scroll Snap modulis ir tīmekļa standarts, kas dod mums zināmu kontroli ritinot Web lapā lai mēs varētu padarīt lietotājus ritināmus uz konkrētām lapas daļām, nevis tikai uz jebkuras vietas.

Ritināšana ir viena no visvairāk veiktajām darbībām tīmekļa vietnē. Pārlūkprogrammām gadu gaitā ir uzlaboja ritināšanas veiktspēju lai atbilstu lietotāju ātrai pirkstu stiprībai. Un izstrādātājiem ir izmantojami radoši lai panāktu labāku vai ārpusbiržas lietotāja pieredzi.

Tomēr, kad runa ir par korelāciju starp kodēšana un ritināšana, Tikai JavaScript, šķiet, ir saņēmusi nekādu kontroli pār pēdējo. Tas notika ilgu laiku, bet ar ritināšanas snap punktu ieviešana, CSS sāka panākt.

Ritināšana bez ritināšanas taustiņiem

Raksturīgi, ka mums nav ļoti lēni, īpaši telefonos. Jo ātrāk jūs ritināt, jo mazāk kontrolējat kur ekrānā jūs nonāksit kad pārtraucāt ritināšanu.

Iedomājieties, ka pārlūkojat vietnes produktu attēla masīvu vai fotoattēlu galeriju vai tiešsaistes slaidus. Tas, ko vēlaties izmantot šādās lietojumprogrammās, ir skatīt visu produktu, fotoattēlu vai slaidu katru reizi, kad ritiniet. Ne tikai a daļa no produkta attēla, fotoattēla vai slaida.

Piemēram, tālāk redzamajā demonstrācijā var redzēt tikai tad, kad lietotājs pārtrauc ritināšanu aptuveni puse no attēla ir redzama ekrāna apakšdaļā. Tomēr lielākā daļa lietotāju vēlētos pilnībā redzēt pēdējo attēlu.

Ritināšana ar ritināšanas taustiņiem

Tas ir, kur mēs ievedam CSS ritināšanas taustiņi. Nosaukums ir pašsaprotams; tas ir CSS standarts, kas ļauj mums snap vienumus vietā ritinot.

Tur ir piecas CSS īpašības kas veido šo standartu:

1. ritināšanas-snap tipa
2. scroll-snap-points-x
3. scroll-snap-points-y
4. ritiniet-snap-koordinātu
5. ritiniet-snap-galamērķi

Pārlūka atbalsts

Īpašības nepieciešamību -webkit un -jaunkundze prefiksus attiecīgajām pārlūkprogrammām. Rakstot šo rakstu, Chrome un Opera neatbalsta CSS ritināšanas pogu.

Ņemiet vērā, ka pēdējās četras īpašības, iespējams, lietotāju aģenti drīzumā samazināsies. Tā vietā, jaunas īpašības, proti, ritiniet-snap-saskaņot, ritiniet snap-margin, un ritiniet-snap-polsterējums, varētu tikt izveidots, kā noteikts šajā specifikācijā.

Tomēr viņi to darīs tam ir līdzīgs mērķis kā iepriekšējās īpašības. Pašlaik bijušais īpašību kopums darbosies labi.

Rekvizīti

Tev vajag pievienojiet ritināšanas-snap tipa īpašumu ritināšanas konteinerā (konteinera elements, kura bērni ir pārpildīti, atrodoties ritināšanas laikā). Tā nosaka snap darbības stingrība. Tam var būt trīs vērtības:

1. obligāts - kad ritināšana ir pabeigta, ritināšanas būs pieķerties attiecīgajam snap punktam
2. tuvums - mazāk stingrs nekā obligāts; tā būs atkarīgs no sprieduma UA vai elements būs snap noteiktā snap punktā
3. neviens nav - nav veikta nekāda saspiešana

The scroll-snap-points-x un scroll-snap-points-y īpašības pieder pie ritināšanas konteinera, arī. Tie attiecas uz punktiem uz x- un y-ass, kur atradīsies snap punkti. To vērtība ir dota atkārtot () funkciju. Piemēram, ja vēlaties pievienot x-ass snap punktus intervāla intervālā 100px jums ir jāizmanto scroll-snap-points-x: atkārtot (100px) noteikums.

The ritiniet-snap-galamērķi īpašums tiek pievienots arī ritināšanas konteineram. Tā nosaka konteinera koordinātu kur atrodas snap galamērķis. Tas ir šajā snap galamērķī, kur konteinera bērni nofiksējas vietā, kad tie ir ritināti.

Varat izmantot ritiniet-snap-koordinātu īpašums kopā ar ritiniet-snap-galamērķi. Jums tas jāpievieno konteinera bērnu elementiem. Tā nosaka bērnu elementu koordinātas, kad lietotājs ritina ekrānu, tiks saskaņots ar to ritināšanas konteinera galamērķa koordinātām.

Ņemiet vērā, ka jums nav jāizmanto visas īpašības. Tikai ritināšanas-snap tipa ir obligāta. Līdztekus tam varat definēt atsevišķus snap punktus vai izmantot galamērķa koordinātu kombināciju.

Kodu piemērs

Šeit ir piemērs koda fragmentam a tipisks ritināšanas trauks, ar ritināšana vertikālā virzienā un daži attēli iekšā. Tas izrāda demo, kuru varat atrast šī ziņojuma sākumā.

 div platums: 300px; augstums: 300px; pārplūde: auto;… div> img platums: 250px; augstums: 150px;… 

Tagad mēs pievienojiet dažus snap punktus uz ritināšanas trauku:

 div platums: 300px; pārplūde: auto; scroll-snap-points-y: atkārtot (150px); scroll-snap-type: obligāta;  

Zemāk jūs varat redzēt, kā izeja izskatās Pievienoti CSS punkti. Ievērojiet, kad ritināšana apstājas, bet apakšējais attēls ir redzams tikai daļēji parādās pilns attēls pēc tam, kad ritināšanas taustiņš noklikšķina uz sviras punkta virs tā.