Gerador de barra de rolagem CSS

Barras de rolagem estilo Chrome, Safari e Edge com a família de pseudoelementos ::-webkit-scrollbar: regras separadas para a trilha, o polegar e o estado de foco do polegar, além de uma largura exata em pixels e um raio de borda do polegar. O Firefox ignora tudo isso completamente e, em vez disso, lê duas propriedades padrão, scrollbar-width e scrollbar-color, que mais tarde entraram nas especificações CSS Scrollbars. Esses não são dois dialetos do mesmo recurso - são dois conjuntos de recursos diferentes com tetos diferentes, e a maioria dos geradores de barra de rolagem ocultam silenciosamente a lacuna, mostrando apenas o resultado do WebKit. Este não.

Defina a largura, a cor da trilha, a cor do polegar, a cor do foco e o raio do canto do polegar uma vez, e a ferramenta cria dois conjuntos de regras a partir das mesmas entradas. O bloco WebKit abrange ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb e seu estado :hover para a caixa de demonstração esquerda, então o que você vê lá é exatamente o que o Chrome, Safari e Edge renderizam - o próprio mecanismo real do navegador, não uma sobreposição simulada. O bloco do Firefox define scrollbar-width e scrollbar-color na caixa de demonstração direita usando o mesmo mecanismo do navegador, e é por isso que a caixa só parece diferente quando esta página está realmente aberta no Firefox; em um navegador WebKit, ele mostra sua própria barra de rolagem padrão, e a ferramenta diz isso, em vez de fingir a aparência do Firefox com pixels emprestados.

O mapeamento de largura é o exemplo mais claro da lacuna: a largura da barra de rolagem do Firefox aceita apenas as palavras-chave auto, thin ou none – nunca um número exato de pixels. Este gerador mapeia honestamente a largura escolhida (8px ou menos torna-se fino, qualquer coisa mais larga torna-se automática) e exibe a palavra-chave resultante ao lado de sua entrada, em vez de inventar um resultado falso do Firefox com pixels perfeitos que não existe. O Firefox também não tem como definir uma cor de foco separada, um raio de borda de polegar independente ou uma cor de trilha que não seja simplesmente o segundo valor da cor da barra de rolagem - essas são limitações reais e permanentes da plataforma, não omissões nesta ferramenta.

Copie o bloco CSS combinado e ambos os conjuntos de regras viajarão juntos, cada um com seu próprio comentário, prontos para serem colados em uma folha de estilo como estão. Tudo é renderizado e atualizado em seu próprio navegador conforme você arrasta os controles – sem upload, sem conta, sem ida e volta do servidor e continua funcionando offline depois que a página é carregada.