Scrollbar-color - CSS-Tricks

Anonim

scrollbar-colorProprietatea controleaza cele doua culori ale unui scrollbar: a culoarea degetul mare și culoarea traseului . scrollbar-colorface parte din proiectul de nivel 1 al grupului de lucru CSS Scrollbars Module, care este încă un lucru în desfășurare începând cu această scriere.

Înainte scrollbar-color, dezvoltatorii nu aveau nicio modalitate standard de a schimba aspectul implicit al barelor de defilare ale unui browser fără a recurge la ascunderea barei de defilare prin intermediul overflow: hiddenși redarea barelor de defilare bazate pe JavaScript sau folosind atribute ale barei de defilare prefixate de browser. Cu scrollbar-color, pe de altă parte, putem coafa o bară de derulare pentru a se potrivi un design fără a recurge la redoing funcționalitatea browser - ul sau folosind prefixe furnizor.

.scrollable-element ( scrollbar-color: red yellow; )
Du-te sălbatic cu culori personalizate

scrollbar-colorva accepta, de asemenea, valorile darkși lightpentru a se potrivi cu preferințele unui utilizator dacă utilizează ceva de genul mod întunecat pe Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

Începând din martie 2019, suportul darkși lightvalorile nu sunt disponibile în niciun browser. este acceptat în Firefox. Consultați secțiunea de asistență pentru browser de mai jos pentru detalii.

Sintaxă

scrollbar-color: auto | dark | light | ;

Valori

scrollbar-color acceptă următoarele valori:

  • auto este valoarea implicită și va reda culorile standard ale barei de derulare pentru agentul utilizator.
  • dark îi va spune agentului utilizator să utilizeze bare de derulare mai întunecate pentru a se potrivi cu schema de culori curentă.
  • light îi va spune agentului utilizator să folosească bare de derulare mai ușoare pentru a se potrivi cu schema de culori curentă.
  • specifică două culori care vor fi utilizate pentru bara de derulare. Prima culoare este pentru „degetul mare” sau partea mobilă a barei de derulare care apare în partea de sus. A doua culoare este pentru „pistă” sau porțiunea fixă ​​a barei de derulare.

Exemplu

Aceasta combină noua sintaxă a specificațiilor și elementele prefixate WebKit.

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.

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-width
  • scrollbar

Resurse

  • Starea actuală a barelor de derulare a stilului
  • Bare de derulare personalizate în WebKit
  • CSSWG Scrollbars Module draft
  • Colecția W3C de cazuri de utilizare pentru modificarea barei de defilare
  • Viitorul CSS: Scrollbars pe dev.to
  • Chromium Ediția 891944