În acest articol ne vom scufunda în lumea scrollbar-urilor. Știu, nu sună prea plin de farmec, dar crede-mă, o pagină bine concepută merge mână în mână cu o bară de defilare potrivită. Bara de defilare cromată de modă veche pur și simplu nu se potrivește la fel de mult.
Ne vom uita la detaliile esențiale ale unei bare de defilare și apoi ne vom uita la câteva exemple interesante.
Componentele unei bare de defilare
Aceasta este mai mult o reîmprospătare, într-adevăr. Există o o mulțime de postări chiar aici pe CSS-Tricks care intră în detalii profunde când vine vorba de stilul personalizat pentru bara de defilare în CSS.
Pentru a stila o bară de defilare, trebuie să fii familiarizat cu anatomia unei bare de defilare. Aruncă o privire la această ilustrație:
Cele două componente principale de care trebuie să țineți cont aici sunt:
- urmări este fundalul de sub bar.
- deget mare este partea pe care utilizatorul face clic și trage în jur.
Putem schimba proprietățile barei de defilare complete folosind prefixul furnizorului::-webkit-scrollbar selector. Putem da barei de defilare o lățime fixă, culoare de fundal, colțuri rotunjite... o mulțime de lucruri! Dacă personalizăm bara de derulare principală a unei pagini, atunci putem folosi ::-webkit-scrollbar direct pe elementul HTML:
html::-webkit-scrollbar {
/* Style away! */
}Dacă personalizăm o casetă de defilare, acesta este rezultatul overflow: scroll, atunci putem folosi ::-webkit-scrollbar pe acel element în schimb:
.element::-webkit-scrollbar {
/* Style away! */
}Iată un exemplu rapid care stilează bara de defilare a elementului HTML astfel încât să fie lată, cu un fundal roșu:
Ce se întâmplă dacă vrem să schimbăm doar degetul mare sau pista barei de derulare? Ai ghicit - avem pseudo-elemente speciale prefixate pentru cele două: ::-webkit-scrollbar-thumb și ::-webkit-scrollbar-track, respectiv. Iată o idee despre ce este posibil atunci când punem toate aceste lucruri împreună:
Destul de periaj! Vreau să vă arăt trei grade de stil personalizat pentru bara de defilare, apoi să deschid o mare vitrină de exemple extrase de pe web pentru inspirație.
Bare de defilare simple și elegante
O bară de derulare personalizată poate fi totuși minimă. Am pus laolaltă un grup de exemple care schimbă subtil aspectul, fie cu o ușoară schimbare de culoare a degetului mare sau a piesei, fie cu un stil ușor pe fundal.
După cum puteți vedea, nu trebuie să înnebunim când vine vorba de stilul barei de defilare. Uneori, este nevoie de o schimbare subtilă pentru a îmbunătăți experiența generală a utilizatorului cu o bară de defilare care se potrivește cu tema generală.
Bare de defilare cool atrăgătoare
Dar să recunoaștem: este distractiv să exersezi puțin și să exersezi creativitatea. Iată câteva bare de defilare ciudate și unice care ar putea fi „prea mult” în unele cazuri, dar cu siguranță că atrage privirea.
Încă una…
Ce-ar fi să luăm bara de defilare pentru o învârtire într-un tren pentru degetul mare și șine pentru, ei bine, șină!
