6XC

Generatore di Scrollbar CSS

Progetta una scrollbar colorata personalizzata con anteprima dal vivo e copia il CSS — compatibile con WebKit e Firefox.

734 visualizzazioni

Questa area serve per testare la tua scrollbar personalizzata. Scorri verso il basso e osserva la barra a destra seguire il tuo design. Cambia colori e dimensioni; il risultato si applica a questo riquadro all'istante.

Questa area serve per testare la tua scrollbar personalizzata. Scorri verso il basso e osserva la barra a destra seguire il tuo design. Cambia colori e dimensioni; il risultato si applica a questo riquadro all'istante.

Questa area serve per testare la tua scrollbar personalizzata. Scorri verso il basso e osserva la barra a destra seguire il tuo design. Cambia colori e dimensioni; il risultato si applica a questo riquadro all'istante.

Questa area serve per testare la tua scrollbar personalizzata. Scorri verso il basso e osserva la barra a destra seguire il tuo design. Cambia colori e dimensioni; il risultato si applica a questo riquadro all'istante.

Questa area serve per testare la tua scrollbar personalizzata. Scorri verso il basso e osserva la barra a destra seguire il tuo design. Cambia colori e dimensioni; il risultato si applica a questo riquadro all'istante.

Questa area serve per testare la tua scrollbar personalizzata. Scorri verso il basso e osserva la barra a destra seguire il tuo design. Cambia colori e dimensioni; il risultato si applica a questo riquadro all'istante.

Come si Personalizzano le Scrollbar con CSS?

Esistono due meccanismi: i browser WebKit (Chrome, Edge, Safari) usano la famiglia di pseudo-elementi ::-webkit-scrollbar, che permette di personalizzare track, thumb, larghezza e raggio; Firefox usa le proprietà standard più semplici scrollbar-color e scrollbar-width. Il codice generato include entrambi, così la tua scrollbar appare coerente ovunque.

Regola colori, larghezza e raggio; il pannello di anteprima a destra scorre con il tuo design applicato, e il CSS si aggiorna istantaneamente.

Domande Frequenti

Perché la mia scrollbar appare diversa in Firefox?

Firefox ignora le regole ::-webkit-scrollbar e rispetta solo scrollbar-color (colori di thumb e track) e scrollbar-width. Raggio ed effetti hover sono esclusivi di WebKit; Firefox mostra una versione semplificata.

Posso personalizzare la scrollbar di un solo elemento?

Sì — delimita i selettori: .mio-box::-webkit-scrollbar { … } e .mio-box { scrollbar-color: … }. Applicalo a html o body (oppure usa i selettori semplici di questo generatore) per l'intera pagina.

Le scrollbar personalizzate funzionano su mobile?

Per lo più no: iOS e la maggior parte dei browser Android usano scrollbar overlay che ignorano questi stili. Considera le scrollbar personalizzate un miglioramento per desktop.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Ombre CSS (Box Shadow) Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera