La scrollbar-widthproprietà in CSS controlla la larghezza o lo "spessore" di una barra di scorrimento. scrollbar-widthfa parte della bozza del modulo Scrollbars Module di livello 1 del CSS Working Group, che è ancora un work in progress. Il consenso al momento della stesura di questo articolo è che scrollbar-widthprobabilmente sarà incluso nelle versioni future di CSS, ma si discute se un argomento variabile sarà consentito o se le opzioni saranno limitate a valori preimpostati (ne parleremo più avanti) .
La regolazione della larghezza della barra di scorrimento è particolarmente importante su pagine o interfacce utente con spazio limitato, dove tagliare solo pochi pixel dalla barra di scorrimento (o rimuoverli del tutto) può dare al contenuto abbastanza spazio per respirare, senza rimuovere la possibilità di scorrere.
Ad esempio, immagina un'interfaccia di modifica del testo in cui le esigenze devono adattarsi a un contenitore breve e stretto. In una situazione del genere, la barra di scorrimento può occupare gran parte dello spazio disponibile:
scrollbar-width: auto;
Con scrollbar-width, possiamo impostare la larghezza su thinper risparmiare spazio:
.scrollable-element ( scrollbar-width: thin; )
textarea con scrollbar-width: thin;
Oppure, possiamo impostare la larghezza su noneper rimuoverlo completamente, risparmiando ancora più spazio (supponendo che stiamo bene con la barra di scorrimento che scompare):
.scrollable-element ( scrollbar-width: none; )
textareacon scrollbar-width: none;- e puoi ancora scorrere!
Sintassi
scrollbar-width: auto | thin | none | ; Valori
scrollbar-width accetta i seguenti valori:
autoè il valore predefinito e renderà le barre di scorrimento standard per il programma utente.thindirà al programma utente di usare barre di scorrimento più sottili, quando applicabile.nonenasconderà completamente la barra di scorrimento, senza influire sulla scorrevolezza dell'elemento.è in discussione, ma (se aggiunta) sarebbe una larghezza massima della barra di scorrimento.
Esempio
Supporto browser
Questo è per la personalizzazione complessiva delle barre di scorrimento. Per la tua migliore scommessa sullo stile di un browser incrociato con barra di scorrimento, vedi qui.
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-gutterscrollbar-colorscrollbar
Risorse
- 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
- w3c Discussione su Github sul controllo della larghezza della barra di scorrimento