6XC

Generatore di Scrollbar CSS

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

1.058 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.

Commenti

Ancora nessun commento — scrivi il primo!

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