⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Generatore di Scrollbar CSS

Personalizza larghezza, traccia, cursore e colore hover di una scrollbar, e vedi il risultato reale WebKit accanto a quello reale Firefox — due sistemi browser davvero diversi, fianco a fianco.

🔒 Elaborato interamente nel tuo browser: nulla di ciò che inserisci qui verrà mai caricato.

10px
8px

Stilizzato con pseudo-elementi ::-webkit-scrollbar — questa casella viene renderizzata tramite il motore reale del browser se è Chrome, Safari o Edge.

Stilizzato con le proprietà scrollbar-width e scrollbar-color di Firefox. Altri browser le ignorano e mostrano qui la propria barra di scorrimento predefinita — apri questa pagina in Firefox per vedere il risultato reale.

Firefox non ha un colore hover separato, border-radius per il cursore o stili indipendenti per la traccia — solo scrollbar-width, mappato qui dallo spessore scelto alla parola chiave reale: thin

Elaborazione... 0%

Risultato

Chrome, Safari ed Edge stilizzano le scrollbar con la famiglia di pseudo-elementi ::-webkit-scrollbar: regole separate per la traccia, il cursore e lo stato hover del cursore, oltre a una larghezza esatta in pixel e un border-radius del cursore. Firefox ignora tutto questo e legge invece due proprietà standard, scrollbar-width e scrollbar-color, entrate in seguito nella specifica CSS Scrollbars. Non si tratta di due dialetti della stessa funzionalità, ma di due insiemi di funzionalità diversi con limiti diversi, e la maggior parte dei generatori di scrollbar nasconde il divario mostrando solo il risultato WebKit. Questo no.

Imposta una volta larghezza, colore traccia, colore cursore, colore hover e raggio angoli cursore, e lo strumento genera due set di regole dagli stessi input. Il blocco WebKit delimita ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb e il suo stato :hover al riquadro demo sinistro, così ciò che vedi lì è esattamente ciò che Chrome, Safari ed Edge renderizzano — il vero motore del browser, non una sovrapposizione simulata. Il blocco Firefox imposta scrollbar-width e scrollbar-color sul riquadro demo destro usando il motore reale di quel browser, ed è per questo che il riquadro appare diverso solo quando questa pagina è aperta in Firefox; in un browser WebKit mostra lì la sua scrollbar predefinita, e lo strumento lo dice invece di fingere un aspetto Firefox con pixel presi in prestito.

La mappatura della larghezza è l'esempio più chiaro del divario: scrollbar-width di Firefox accetta solo le parole chiave auto, thin o none — mai un valore esatto in pixel. Questo generatore mappa onestamente la larghezza scelta (8px o meno diventa thin, qualsiasi valore superiore diventa auto) e mostra la parola chiave risultante accanto al tuo input, invece di inventare un risultato Firefox pixel-perfect che non esiste. Firefox inoltre non ha modo di impostare un colore hover separato, un border-radius indipendente del cursore, o un colore della traccia che non sia semplicemente il secondo valore di scrollbar-color — queste sono limitazioni reali e permanenti della piattaforma, non omissioni di questo strumento.

Copia il blocco CSS combinato ed entrambi i set di regole viaggiano insieme, ciascuno sotto il proprio commento, pronti per essere incollati in un foglio di stile così come sono. Tutto viene renderizzato e aggiornato nel tuo browser mentre trascini i controlli — nessun upload, nessun account, nessun passaggio dal server, e continua a funzionare offline una volta caricata la pagina.

Ti piace questo strumento? Pensi che questo prodotto sia utile? Ne vedi il potenziale e vuoi supportarlo?

🛡️
Eseguito nel Browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione avviene completamente offline. Sicuro al 100%.

Formati accettati e regole

  • Controlli condivisi — larghezza, colore traccia, colore cursore, colore hover, raggio angoli cursore — pilotano entrambi i motori dagli stessi input.
  • Mappatura onesta della larghezza della scrollbar: Firefox supporta solo thin, auto o none, quindi il valore esatto in pixel che scegli viene mappato alla parola chiave reale più vicina e mostrato accanto al tuo input.
  • Output CSS combinato e copiabile con le regole per pseudo-elementi WebKit e le proprietà standard Firefox, chiaramente commentato.

Vantaggi principali

✓ Due riquadri demo dal vivo mostrano la scrollbar reale di ciascun motore: il riquadro WebKit mostra sempre il risultato vero in Chrome, Safari ed Edge, senza simulazioni.
✓ Il divario di funzionalità di Firefox viene mostrato, non nascosto: colore hover, raggio del cursore e stile indipendente della traccia semplicemente non esistono in Firefox, e lo strumento lo dice chiaramente invece di fingere il contrario.
✓ Un unico blocco CSS copiabile riunisce entrambi i set di regole con un commento di fallback, pronto per essere incollato così com'è.

Casi d'uso

  • • Personalizza la barra di scorrimento della sidebar di una dashboard con la palette del marchio e verifica esattamente fino a che punto arriva lo styling in Firefox prima di rilasciarlo.
  • • Ottieni la keyword CSS sincera per lo scrollbar-width di Firefox in base allo spessore scelto, invece di tirare a indovinare se thin o auto sia l'abbinamento più vicino.
  • • Copia un blocco CSS che contiene sia le regole con pseudo-elementi WebKit sia le proprietà standard di Firefox, ciascuna chiaramente commentata, direttamente in un foglio di stile.