Categoria: Sviluppo
Generatore di barre di scorrimento CSS
Crea CSS per barre di scorrimento personalizzate in locale, con anteprima
Progetta barre di scorrimento personalizzate con anteprima dal vivo e copia il CSS di scrollbar-color, scrollbar-width e dello stile WebKit. Generato nel tuo browser.
Anteprima
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color e scrollbar-width sono le proprietà standard e sono quelle usate da Firefox e dalle versioni attuali di Chrome. Le regole ::-webkit- sono un prefisso non standard mantenuto per Chrome, Edge e Safari più vecchi: i due motori non renderizzeranno in modo identico.
Sia l'anteprima sia il CSS generato nascono nel tuo browser.
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
La personalizzazione delle barre di scorrimento è divisa tra due meccanismi. Il modulo CSS Scrollbars Styling offre `scrollbar-color` e `scrollbar-width`: due proprietà, ampio supporto compreso Firefox e un controllo volutamente limitato. Gli pseudo-elementi `::-webkit-scrollbar`, più vecchi, danno molto di più, ma sono un prefisso non standard. Questo generatore emette prima le proprietà standard e poi il blocco WebKit, etichettato, così ottieni ampia copertura senza far finta che siano la stessa cosa. Non renderizzeranno in modo identico, e una barra di scorrimento è un controllo su cui le persone fanno affidamento: per questo l'anteprima qui scorre davvero invece di mostrarne un disegno.
Come si usa
- Imposta il selettore dell'elemento da personalizzare, poi scegli i colori di cursore, binario e hover.
- Scegli scrollbar-width e regola larghezza e raggio WebKit.
- Scorri l'anteprima per verificare, poi copia il CSS.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Le barre personalizzate funzionano in tutti i browser?
- Non in modo identico. scrollbar-color e scrollbar-width funzionano in Firefox e nelle versioni attuali di Chrome ed Edge; le regole ::-webkit- coprono Chrome, Edge e Safari più vecchi. Lo strumento emette entrambe, ma i due motori disegnano le barre in modo diverso e nessun CSS le rende identiche.
- Che cos'è scrollbar-color?
- La proprietà standard che imposta i colori di cursore e binario in una sola dichiarazione: prima il cursore, poi il binario. Fa parte del modulo CSS Scrollbars Styling, quindi è la versione da cui partire.
- Perché includere anche il CSS WebKit?
- Perché le proprietà standard espongono solo il colore e una larghezza approssimativa, e perché le vecchie versioni di WebKit e Blink non le supportano. Le regole con prefisso aggiungono dimensione e raggio espliciti e coprono quei browser.
- Conviene nascondere del tutto la barra?
- Con prudenza. scrollbar-width: none elimina un segnale visibile che indica che l'area scorre e permette di trascinarla, il che penalizza chi non usa rotellina o trackpad. Valuta piuttosto una barra sottile e ben contrastata.