O Introducere în Punctele Snap CSS Scroll

Modul CSS Scroll Snap este un standard web care ne oferă un anumit control derularea pe o pagină web astfel încât să putem face utilizatorii să parcurgă anumite părți ale unei pagini, și nu doar oriunde pe ea.

scrolling este una dintre cele mai performante acțiuni de pe un site web. Navigatorii, de-a lungul anilor, au îmbunătățirea performanței de derulare pentru a se potrivi cu puterea degetului agil utilizatorilor. Și, dezvoltatorii au folosit scrolling creativ pentru a obține o experiență de utilizator mai bună sau mai bună.

Cu toate acestea, atunci când vine vorba de corelația dintre codare și defilare, numai JavaScript părea să aibă vreun control asupra celor din urmă. Asta a fost pentru o lungă perioadă de timp, dar cu introducerea punctelor de fixare a defazajului, CSS a început să se prindă.

Derulare fără puncte de defilare

De obicei, nu derulam foarte lent, mai ales pe telefoane. Cu cât defilați mai repede, cu atât mai puțin aveți controlul unde pe ecran vei ajunge când ai oprit derularea.

Imaginați-vă că parcurgeți o serie de imagini de pe un site web sau o galerie de fotografii sau diapozitive online. Ce ați prefera în astfel de aplicații este consultați întregul produs, fotografia sau diapozitivul de fiecare dată când defilați. Nu numai a parte din imaginea produsului, fotografia sau diapozitivul.

De exemplu, în demo-ul de mai jos puteți vedea ori de câte ori utilizatorul oprește derularea, numai aproximativ jumătate din imagine este vizibilă în partea de jos a ecranului. Cu toate acestea, majoritatea utilizatorilor ar prefera să vadă complet ultima imagine.

Derulați cu puncte de deplasare

Aici intrăm CSS puncte de defilare scroll. Numele este explicabil; este un standard CSS care ne permite fixați elementele în poziție când derulați.

Sunt cinci proprietati CSS care constituie acest standard:

1. derulați-snap-tip
2. scroll snap-puncte-x
3. defilare de completare snap-puncte-y
4. derulați-snap-coordonate
5. derulați-snap-destinație

Suport pentru browser

Proprietatile nevoie -WebKit și -Domnișoară prefixe pentru browserele relevante. De la scrierea acestui articol, funcția CSS de defilare nu este acceptată în Chrome și Opera.

Rețineți că ultimele patru proprietăți vor fi probabil scăzute de agenții utilizator în viitorul apropiat. In schimb, noi proprietăți, și anume derulați-snap-align, derulați-snap-marjă, și derulați-snap-padding, ar putea fi create, așa cum este definit în prezenta descriere.

Cu toate acestea, vor au un scop similar ca proprietăți anterioare. În prezent, fostul set de proprietăți va funcționa foarte bine.

Proprietăți

Trebuie să adaugă derulați-snap-tip proprietate la containerul de derulare (elementul container al cărui copii sunt în plină desfășurare în timp ce este derulat). Specifică strictețea acțiunii rapide. Pot avea trei valori:

1. obligatoriu - când defilarea este terminată, defilarea se va face apăsați pe un punct de acces relevant
2. proximitate - mai puțin stricte decât obligatoriu; o sa depind de judecata UA dacă elementul se va fixa la un punct de fixare dat
3. nici unul - nu se face nimic

scroll snap-puncte-x și defilare de completare snap-puncte-y proprietăţi aparțin containerului de scroll, de asemenea. Acestea se referă la punctele de pe axele x și y unde vor exista puncte de fixare. Valoarea lor este dat de repeta() funcţie. De exemplu, dacă doriți să adăugați puncte de fixare de-a lungul axei x în intervalul de 100px trebuie să utilizați scroll-snap-points-x: repetați (100px) regulă.

derulați-snap-destinație proprietatea este adăugată și în containerul de derulare. Aceasta definește o coordonată pe container unde se află o destinație rapidă. Este la această destinație rapidă în care copiii containerului se vor prinde în poziție atunci când sunt defilați.

Puteți utiliza funcția derulați-snap-coordonate proprietate împreună cu derulați-snap-destinație. Trebuie să o adăugați la elementele copilului containerului. Aceasta definește coordonatele elementelor copilului, care se vor alinia cu coordonatele de destinație ale containerului de defilare atunci când utilizatorul derulează ecranul.

Rețineți că nu trebuie să utilizați toate proprietățile simultan. Numai derulați-snap-tip este obligatorie. În același timp, puteți defini fie puncte individuale de fixare, fie puteți folosi combinația destinație-coordonate.

Exemplu de cod

Iată un exemplu de fragment de cod pentru un container tipic de derulare, cu derularea în direcție verticală și câteva imagini din interior. Acesta scoate demo-ul pe care îl puteți găsi la începutul acestui post.

 div lățime: 300px; înălțime: 300px; overflow: auto; ... div> img width: 250px; înălțime: 150px; ... 

Acum noi adăugați câteva puncte la containerul de derulare:

 div lățime: 300px; overflow: auto; scroll-snap-points-y: repetați (150px); scroll-snap-type: obligatoriu;  

Mai jos, puteți vedea cum arată ieșirea cu CSS snap points added. Observați de fiecare dată când derularea se oprește în timp ce imaginea din partea de jos este vizibilă doar parțial apare imaginea completă după ce scrollport-ul se fixează într-un punct de fixare deasupra lui.