Generatore di barra di scorrimento CSS

Generatore di barra di scorrimento CSS: a cosa serve

Una barra di scorrimento nei colori del brand dà al sito una finitura migliore, ma il CSS è cambiato: oggi esistono le proprietà standard scrollbar-color e scrollbar-width, supportate da Firefox, Chrome ed Edge 121 e Safari 26.2, mentre le versioni vecchie capiscono solo ::-webkit-scrollbar.

Questo generatore crea entrambi i modi separati da @supports, come consiglia la documentazione di Chrome, perché quando scrollbar-color è definita Chrome ignora le vecchie regole. Scegli i colori di traccia e barra, la larghezza, gli angoli e il colore al passaggio del mouse, e prova nella casella di esempio.

Come si usa

1. Scegli i colori di traccia e barra.
2. Regola larghezza e angoli.
3. Copia il CSS per l’intera pagina o per una casella.

Quando usarlo

• Barra di scorrimento nei colori del brand.
• Caselle con scorrimento dentro la pagina.
• Pannelli e sistemi con tema scuro.

Domande frequenti

Funziona in tutti i browser?

Le proprietà standard scrollbar-color e scrollbar-width funzionano su Firefox, Chrome ed Edge dalla versione 121 e Safari 26.2. Per le versioni precedenti, il codice include anche le regole ::-webkit-scrollbar, che cambiano larghezza, angoli e colore al passaggio del mouse.

Perché il codice usa @supports?

In Chrome, quando scrollbar-color è definita, le regole ::-webkit-scrollbar vengono ignorate. Il @supports applica le proprietà standard solo dove esistono e lascia le regole vecchie ai browser che non le conoscono.

Personalizzare la barra danneggia l’accessibilità?

Può danneggiarla se è troppo sottile o senza contrasto con la traccia. Mantieni una larghezza che si riesca a prendere con il mouse e un colore che si distingua dallo sfondo.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili