Scrollbar-color - Trucchi CSS

Anonim

La scrollbar-colorproprietà controlla i due colori di una barra di scorrimento: il colore del pollice e il colore della traccia . scrollbar-colorfa parte della bozza del modulo Scrollbars Module Livello 1 del CSS Working Group, che è ancora in fase di elaborazione al momento della stesura di questo documento.

In precedenza scrollbar-color, gli sviluppatori non avevano un modo standard per modificare l'aspetto predefinito delle barre di scorrimento di un browser senza ricorrere a nascondere la barra di scorrimento tramite overflow: hiddene renderizzare le barre di scorrimento basate su JavaScript o utilizzando gli attributi della barra di scorrimento con prefisso del browser. Con scrollbar-color, d'altra parte, possiamo modellare una barra di scorrimento in modo che corrisponda a un design senza ricorrere a ripetere la funzionalità del browser o utilizzare i prefissi del fornitore.

.scrollable-element ( scrollbar-color: red yellow; )
Scatenati con colori personalizzati

scrollbar-coloraccetterà anche i valori di darke lightper abbinare le preferenze di un utente se sta usando qualcosa come la modalità oscura su Mac OSX.

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

A partire da marzo 2019, il supporto per darke i lightvalori non è disponibile in nessun browser. è supportato in Firefox. Vedere la sezione di supporto del browser di seguito per i dettagli.

Sintassi

scrollbar-color: auto | dark | light | ;

Valori

scrollbar-color accetta i seguenti valori:

  • auto è il valore predefinito e renderà i colori standard della barra di scorrimento per il programma utente.
  • dark dirà al programma utente di usare barre di scorrimento più scure per abbinare lo schema di colori corrente.
  • light dirà al programma utente di usare barre di scorrimento più chiare per abbinare lo schema di colori corrente.
  • specifica due colori da utilizzare per la barra di scorrimento. Il primo colore è per il "pollice" o la parte mobile della barra di scorrimento che appare in alto. Il secondo colore è per la "traccia" o la parte fissa della barra di scorrimento.

Esempio

Questo combina la nuova sintassi delle specifiche e il materiale con prefisso WebKit.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
91 * 87 11 88 * TP *

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * No 81 * 14,0-14,4 *

Relazionato

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Risorse

  • Lo stato attuale dello stile delle barre di scorrimento
  • Barre di scorrimento personalizzate in WebKit
  • Bozza del modulo CSSWG Scrollbars
  • Raccolta W3C di casi d'uso per la modifica della barra di scorrimento
  • Futuro dei CSS: barre di scorrimento su dev.to
  • Chromium Issue 891944