Share
Poate fi dificil pentru dezvoltatorii web să garanteze o experiență scrolling bine controlată, dar, din fericire, un modul CSS numit "Scroll Snap" promite să vă ajute. Aceasta se va aplica în cazul în care o poziție de defilare se termină după ce o operație de defilare a fost finalizată.
Printre altele, acest modul conține caracteristici pentru a controla fațete, cum ar fi panning, combinat cu "poziții de fixare" și produce o aliniere specială a conținutului într-un container derulant.
W3C a lansat recent Scroll Snap ca o recomandare pentru candidat care include implementări și exemple bine gândite împreună cu sintaxa actualizată. Hai să ne aruncăm.
Pentru a înțelege pe deplin puterea deranjării parolei și modul în care funcționează, trebuie să înțelegem terminologia acesteia. Acest lucru va contribui, de asemenea, la evitarea confuziei atunci când acești termeni noi sunt folosiți pe parcursul acestui tutorial.
Scroll-ul de derulare are loc într-un "snapport" sau "scrollport"; totuși, ambele înseamnă același lucru și pot fi de asemenea menționate ca un "container de derulare". Aceasta este regiunea în care trăiește comportamentul dvs. de derulare a derulării așa cum este indicat în diagrama de mai sus (marginea exterioară întreruptă). Intențiile sunt de a ajuta la întărirea pozițiilor de defilare pe care o listă de scroll a containerului de derulare se va încheia după ce o operație de defilare a fost finalizată.
Fiecare element al acestui "snapport" este denumit "zonă de blocare" și este obiectul pe care îl vizați. Fiecare zonă de blocare conține o "poziție de fixare" definită și de "poziția de fixare" a containerului de derulare și reprezentată de linia punctată roșie din diagrama de mai sus.
Cu terminologia în afara de modul de a revede câteva exemple și de a explora modul în care această funcție funcționează în viața reală. Dacă doriți să citiți mai multe despre alte tipuri de cazuri de utilizare, puteți începe cu acest exemplu W3C folosind o galerie foto ca și demonstrație și aici, de asemenea. Există, de asemenea, o actualizare interesantă din Modulele din august 2017 CR care specifică un comportament interesant :ţintă ar trebui să posede.
În momentul acestei scrieri este mai bine să vedeți următoarele demo-uri cu Safari 11 ca și alte browsere (în timp ce se menționează că sunt suportate) nu au de fapt suport complet cu noua sintaxă, în ciuda datelor de la caniuse și teste personale.
Exemplul de mai jos prezintă numai proprietățile foarte minime necesare pentru inițierea comportamentului CSS Scroll Snap și nu include niciun filtru de tip polyfill deoarece nu am reușit să găsesc un polyfill de lucru care a funcționat cu cea mai recentă sintaxă publicată. De asemenea, este bine să rețineți că orice container de derulare va necesita o altă proprietate CSS cunoscută, cunoscută sub numele de revărsare.
Demo-ul de mai sus profită de axa y ca poziția de prindere cu toate acestea, puteți face la fel de ușor în axa x. Dacă nu aveți Safari 11 pe sistemul dvs., aici este o înregistrare pe ecran care prezintă funcționalitatea demo live furnizată mai sus.
Panourile se fixează cu ușurință. Observați că când derotez există un punct în care ritmul de derulare preia și avansează în caseta următoare. Destul de ciudat?
Iată oa doua demonstrație prezentând axa y pentru a afișa imaginile într-o manieră galerie-esque.
Pe măsură ce utilizatorul se rotește orizontal, impulsul se îndreaptă spre centrul mort al regiunii scrollport și a regiunii zonei snap, indiferent de dimensiunea imaginii.
Acum este momentul să revizuiți și să explicați proprietățile reale în ceea ce privește sintaxa și valorile acceptate.
Actuala specificație Scroll Snap conține doar patru proprietăți și fiecare joacă un rol important. Aceste patru proprietăți sunt ...
Accentsconagua
derulați-snap-tipderulați-snap-alignparcurgere-paddingparcurgere-marjaSă aruncăm o privire mai atentă și să explicăm ceea ce face fiecare, unde este definit și ce fel de valori sunt acceptate.
derulați-snap-tipAceastă proprietate specifică dacă un container de derulare este, de fapt, un "container de tip" scroll "sau" snapport ", cât de strict se fixează și de ce axe sunt folosite. Dacă nu este specificată nicio valoare de strictețe, proximitate valoarea este trecută ca valoare implicită. Această proprietate acceptă, de asemenea, o altă valoare care ajută la definirea "axei de fixare". Acest lucru vă va permite să treceți în două valori alese de dvs. (adică. scroll-snap-type: y obligatoriu). În acest caz, afirmăm Snap-type apare doar în axa y și este obligatoriu.
Scroll Snap Axe: X, y, bloc, in linie, sau ambii
X: Containerul de derulare se fixează pentru a fixa numai pozițiile pe axa orizontală.y: Containerul de derulare se fixează pentru a fixa pozițiile doar pe axa sa verticală.bloc: Containerul de derulare se fixează pentru a fixa pozițiile numai în axa blocului.in linie: Containerul de derulare se fixează pentru a poziționa pozițiile doar în axa inline.ambii: Containerul de derulare se fixează pentru a poziționa pozițiile în ambele axe în mod independent (eventual se rupe la diferite elemente din fiecare axă).Scroll Strictness Snap: nici unul, proximitate, și obligatoriu
nici unul: Dacă este specificat într-un container de derulare, containerul de derulare nu trebuie să se oprească.proximitate: Dacă este specificat într-un container de derulare, este necesar ca containerul de derulare să fie fixat într-o poziție de blocare când nu există operațiuni de defilare active. Dacă există o poziție accesibilă disponibilă, atunci containerul de defilare trebuie să se închidă la terminarea unei defilați (dacă nu există niciunul, atunci nu se produce nicio rupere).obligatoriu: Dacă este specificat într-un container de derulare, containerul de derulare se poate prinde în poziția de blocare la terminarea unei defilați.derulați-snap-alignProprietatea de aliniere prin derulare specifică o poziție de fixare a containerului de derulare ca aliniere a zonei de fixare (ca subiect de aliniere) în snapport-ul containerului său snap (ca container de aliniere). Cele două valori specifică alinierea de fixare în axa linie și respectiv în axa blocului. Dacă este specificată o singură valoare, valoarea a doua este implicită la aceeași valoare. Valorile acceptate sunt nici unul, centru, start și Sfârșit.
Pe scurt, această proprietate este definită pentru copiii următori ai containerului de derulare și acceptă două valori. Prima valoare reprezintă axa x în timp ce secunde reprezintă axa y; de exemplu… scroll-snap-align: centrul de start.
nici unul: Această casetă nu definește o poziție de fixare pe axa specificată.start: Începeți alinierea zonei de derulare a parolei de derulare a acestei casete în cadrul snapport-ului containerului de derulare este o poziție de fixare pe axa specificată.Sfârșit: Terminarea alinierii zonei de derulare a parolei de derulare a acestei casete în cadrul snapport-ului containerului de derulare este o poziție fixă pe axa specificată.centru: Alinierea centralizată a zonei de derulare a parolei de derulare a acestei casete în cadrul snapportului containerului de derulare este o poziție fixă pe axa specificată.parcurgere-paddingValorile de defilare activează ca decalaj, atunci când sunt declarate, pentru un container de derulare și pentru a reduce regiunea scrollabilă care este considerată "vizibilă". Acest lucru nu are niciun efect asupra aspectului, scrolului de origine, poziției inițiale și dacă un element este considerat efectiv vizibil. Există două forme, la fel ca proprietatea standard de umplutură în CSS, cu toate acestea există și o versiune lungă, cum ar fi derulați-padding-top, și derulați-padding-bottom, de exemplu.
parcurgere-marjaAceste valori reprezintă ansambluri atunci când sunt declarate pentru un container de defilare care definesc zona snap de derulare utilizată pentru a rupe elemente în snapport. Funcționează și acționează la fel ca și margine proprietate, inclusiv variațiile stenografice și lungi, cum ar fi parcurgere-margin-top, și derulați-margin-bottom.
Datorită actualizărilor recente publicate în versiunea actuală a editorului, veți găsi o lipsă de sprijin pe tot cuprinsul și nici o polifilă așa cum am menționat. Există și o șansă ca proprietatea derulați-completare snap-stop este în pericol și ar putea fi abandonat în perioada CR. Am descoperit, de asemenea, în timpul cercetării și experimentării mele min înălțime nu funcționează atunci când este definită pe containerul de derulare în prezent. S-ar putea să existe și alte proprietăți care să aibă aceleași rezultate, iar dacă le găsiți, vă rugăm să le lăsați în comentariile de mai jos.
Deci, asta este CSS Scroll de la o imagine de ansamblu. Merita? V-ați considera util? Sau ar trebui să fie așezat în colțurile întunecate ale universului niciodată să nu mai fie găsit vreodată? Lăsați comentariile de mai jos și, ca întotdeauna, codarea fericită!
