Gerador de barra de rolagem CSS

Chrome, Safari e Edge estilizam barras de rolagem com a família de pseudo-elementos ::-webkit-scrollbar: regras separadas para a trilha, o thumb e o estado hover do thumb, além de uma largura exata em pixels e um border-radius no thumb. O Firefox ignora tudo isso e, em vez disso, lê duas propriedades padrão, scrollbar-width e scrollbar-color, que entraram depois na especificação CSS Scrollbars. Estes não são dois dialetos do mesmo recurso — são dois conjuntos de funcionalidades com limites diferentes, e a maioria dos geradores de barra de rolagem disfarça a lacuna silenciosamente, mostrando apenas o resultado do WebKit. Este não.

Defina a largura, cor da trilha, cor do thumb, cor no hover e raio dos cantos do thumb uma vez, e a ferramenta constrói dois conjuntos de regras a partir das mesmas entradas. O bloco WebKit aplica ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb e seu estado :hover à caixa de demonstração esquerda, então o que você vê ali é exatamente o que Chrome, Safari e Edge renderizam — o motor real do próprio navegador, não uma sobreposição simulada. O bloco Firefox define scrollbar-width e scrollbar-color na caixa de demonstração direita, usando o motor real desse mesmo navegador, por isso a caixa só parece diferente quando esta página está realmente aberta no Firefox; em um navegador WebKit, ela mostra sua própria barra de rolagem padrão ali, e a ferramenta informa isso em vez de simular uma aparência do Firefox com pixels emprestados.

O mapeamento de largura é o exemplo mais claro da lacuna: scrollbar-width no Firefox aceita apenas as palavras-chave auto, thin ou none — nunca um valor exato em pixels. Este gerador mapeia honestamente a largura escolhida (8px ou menos vira thin, qualquer valor maior vira auto) e exibe a palavra-chave resultante ao lado da sua entrada, em vez de inventar um resultado falso de pixel perfeito para o Firefox, que não existe. O Firefox também não tem como definir uma cor de hover separada, um border-radius independente no thumb ou uma cor de trilha que não seja simplesmente o segundo valor de scrollbar-color — estas são limitações reais e permanentes da plataforma, não omissões desta ferramenta.

Copie o bloco CSS combinado e ambos os conjuntos de regras viajam juntos, cada um sob seu próprio comentário, prontos para colar em uma folha de estilo como estão. Tudo renderiza e atualiza no seu próprio navegador conforme você arrasta os controles — sem upload, sem conta, sem idas e vindas ao servidor, e continua funcionando offline depois que a página carrega.