Scrollbar-width - CSS-Tricks

Anonim

scrollbar-widthProprietatea în CSS controlează lățimea sau „grosimea“ a unui scrollbar. scrollbar-widthface parte din proiectul grupului de lucru CSS Scrollbars Module Level 1, care este încă un lucru în desfășurare. Consensul la momentul scrierii acestui articol este că scrollbar-widtheste probabil să fie inclus în versiunile viitoare ale CSS, dar există dezbateri dacă va fi permis un argument variabil sau dacă opțiunile vor fi limitate la valori prestabilite (mai multe despre cele ulterioare) .

Reglarea lățimii barei de defilare este deosebit de importantă în paginile sau interfețele utilizatorului cu spațiu limitat, unde tăierea la doar câțiva pixeli de pe bara de defilare (sau eliminarea totală) poate oferi conținutului suficient spațiu pentru respirație, fără a elimina capacitatea de derulare.

Pentru un exemplu, imaginați-vă o interfață de editare a textului în care trebuie să se încadreze într-un container scurt și îngust. Într-o astfel de situație, bara de derulare poate ocupa o mare parte din spațiul disponibil:

cu scrollbar-width: auto;

Cu scrollbar-width, putem seta lățimea la thinpentru a economisi spațiu:

.scrollable-element ( scrollbar-width: thin; )
textarea cu scrollbar-width: thin;

Sau putem seta lățimea pentru nonea o elimina complet, economisind și mai mult spațiu (presupunând că suntem OK cu bara de derulare care dispare):

.scrollable-element ( scrollbar-width: none; )
textareacu scrollbar-width: none;- și puteți continua să derulați!

Sintaxă

scrollbar-width: auto | thin | none | ;

Valori

scrollbar-width acceptă următoarele valori:

  • auto este valoarea implicită și va reda barele de defilare standard pentru agentul utilizator.
  • thin va spune agentului utilizator să utilizeze bare de derulare mai subțiri, atunci când este cazul.
  • none va ascunde complet bara de derulare, fără a afecta capacitatea de derulare a elementului.
  • este în dezbatere, dar (dacă se adaugă) ar fi o lățime maximă a barei de derulare.

Exemplu

Suport pentru browser

Aceasta este pentru personalizarea generală a barelor de derulare. Pentru cel mai bun pariu pentru stilul unui browser încrucișat pe bara de derulare, consultați aici.

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.

Desktop

Crom Firefox IE Margine Safari
91 * 87 11 88 * TP *

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 * Nu 81 * 14.0-14.4 *

Legate de

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Resurse

  • CSSWG Scrollbars Module draft
  • Colecția W3C de cazuri de utilizare pentru modificarea barei de defilare
  • Viitorul CSS: Scrollbars pe dev.to
  • w3c Discuție Github despre controlul lățimii barei de derulare