Bara de defilare - CSS-Tricks

O scurtă istorie a stilării barelor de derulare:

Obișnuia să fie un lucru pe care numai Internet Explorer îl putea face (versiuni antice) cu lucruri de genul -ms-scrollbar-base-color. Acestea nu mai există.
Apoi, motoarele de browser bazate pe WebKit au intrat la bord cu lucruri de genul ::-webkit-scrollbar. Asta acoperă în mare parte această intrare Alamanac, deoarece funcționează astăzi în peisajul Safari / Chrome.
Standardele s-au implicat în cele din urmă și acele opțiuni de stil sunt acoperite de proprietăți fără prefix, cum ar fi culoarea barei de derulare și lățimea barei de derulare.

Barele de defilare pentru lumea Safari / Chrome sunt expuse în spatele -webkitprefixului furnizorului.

Această intrare almanah este o prezentare generală, pentru o defalcare mai completă a lucrului cu bare de defilare personalizate, vă rugăm să citiți acest articol CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

-webkit-scrollbarFamilia de proprietăți constă din elemente pseudo-șapte diferite , care, împreună, cuprind un element de plin scrollbar UI:

::-webkit-scrollbarse adresează fundalului barei în sine. De obicei este acoperit de celelalte elemente
::-webkit-scrollbar-button se adresează butoanelor direcționale de pe bara de derulare
::-webkit-scrollbar-track se adresează spațiului gol „sub” bara de progres
::-webkit-scrollbar-track-piece este cel mai sus strat al barei de progres, neacoperit de elementul de derulare glisabil (degetul mare)
::-webkit-scrollbar-thumb se adresează elementului de derulare glisabil care se redimensionează în funcție de dimensiunea elementului derulabil
::-webkit-scrollbar-corner se adresează colțului (de obicei) inferior al elementului derulabil, unde s-ar putea întâlni două bare de derulare
::-webkit-resizerse adresează mânerului de redimensionare care poate fi glisat care apare deasupra scrollbar-cornercolțului inferior al unor elemente

În plus față de aceste pseudo-elemente, există și unsprezece clase de pseudo-selector care nu sunt necesare, dar oferă proiectanților puterea de a stiliza diferite stări și interacțiuni ale interfeței UI a barei de derulare. O defalcare completă a acestor pseudo-selectori și un exemplu detaliat poate fi găsit în acest articol CSS-Tricks.

Verificați acest stilou!

Puncte de interes

Dacă nu există un selector de calificare înaintea diferitelor pseudo-elemente, stilurile se vor aplica oricărei bare de derulare care poate apărea pe pagină.
Setarea -webkit-scrollbarstilurilor este o modalitate bună de a forța pagina dvs. web să afișeze bare de defilare orizontale sau verticale pe versiunile de Mac OS mai noi decât Lion, pe care barele de defilare sunt de obicei ascunse în mod implicit.
Deoarece această proprietate se află în spatele unui -webkitprefix de furnizor, mai multe plugin-uri jQuery au fost scrise în „polyfill” sau extind această funcționalitate la alte browsere. Un astfel de plugin este jScrollPane.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.