Gerador de barras de rolagem CSS

Defina largura, raio, borda e três cores, confira o resultado na prévia rolável e copie o CSS gerado.

Funciona localmente no seu navegador

Ver categoria: Frontend e design (34)

· ::-webkit-scrollbar · scrollbar-color · Firefox

PAINEL DE CONTROLE

PRÉVIA

Scrollable developer notes

Use the thumb to inspect the generated width, border and hover treatment.

Cross-browser output

The export includes standardized Firefox properties and WebKit pseudo-elements.

Copy production CSS

Apply the generated class to any overflow container in your interface.

Keep native behavior

Styling changes appearance while keyboard and wheel scrolling remain native.

EXPORTAR CSS

Como estilizar uma barra de rolagem e copiar o CSS gerado

O gerador escreve dois conjuntos de regras a partir dos mesmos seis valores: as propriedades padrão scrollbar-width e scrollbar-color para o Firefox e a família ::-webkit-scrollbar — trilho, controle, hover e largura/altura — para Chromium e Safari. O indicador no cabeçalho do palco mostra a largura atual e a palavra-chave correspondente, por exemplo “12px · auto”.

A prévia é um contêiner com estouro real, não um desenho: no teste havia 528 px de conteúdo em uma janela de 300 px, então a barra é pintada pelo próprio navegador. O mesmo CSS que aparece no painel de código é injetado com #cs-scroll-preview como seletor; só o nome da classe difere do que você copia.

Escolha uma predefinição para carregar um conjunto completo de valores. Forest é o padrão — largura 12, raio 10, borda 3, controle #2e8b62, hover #1f6f4b, trilho #e7f0eb —, seguida de Slate (11/3/2), Sunset (14/12/3) e Minimal (7/7/0).

Também dá para definir os valores à mão: Largura (4–28 px), Raio do canto (0–30 px), Borda do controle (0–6 px) e as cores do controle, do hover e do trilho. Ao editar um campo o seletor passa para a entrada Personalizado; Redefinir devolve os padrões do Forest.

Os números são confirmados ao sair do campo ou pressionar Enter: são arredondados para pixels inteiros, limitados à faixa e reescritos no campo. 100 vira 28, 3 vira 4, um campo vazio volta para 4 e 12.6 vira 13, então o número na tela, o indicador e o CSS exportado nunca divergem.

Acompanhe a prévia enquanto altera os valores: ela rola de verdade, então o controle, a borda, o trilho e a cor de hover são pintados pelo navegador. Larguras de até 10 px também mudam a declaração padrão para scrollbar-width: thin; de 11 px em diante o valor é auto, porque o Firefox aceita apenas essas duas palavras-chave e a largura exata em pixels é um recurso do WebKit.

Pressione Copiar CSS para levar o texto do painel de código à área de transferência — cinco regras e nada mais — ou Redefinir para voltar aos padrões do Forest. O seletor da saída é .custom-scrollbar; troque-o pela classe do seu próprio contêiner com estouro.

Largura, cores, predefinições e os dois conjuntos de regras que o gerador escreve

O que o CSS copiado contém

O bloco reúne cinco regras: a classe base com scrollbar-color: <controle> <trilho>, ::-webkit-scrollbar com largura e altura, ::-webkit-scrollbar-track com a cor do trilho e o raio, ::-webkit-scrollbar-thumb com a cor do controle, uma borda pintada com a cor do trilho e o mesmo raio, e ::-webkit-scrollbar-thumb:hover com a cor de hover.

As cores saem como hex de seis dígitos, em minúsculas, e os números como pixels inteiros. A borda do controle usa de propósito a cor do trilho: ela recolhe o controle para que o trilho apareça como um fio fino ao redor, e por isso mudar a cor do trilho também muda a borda.

Predefinições, padrões e Redefinir

As quatro predefinições são conjuntos fixos de valores, não folhas de estilo: Forest 12/10/3 com #2e8b62, #1f6f4b e #e7f0eb, Slate 11/3/2 com #526575, #354754 e #dfe5e8, Sunset 14/12/3 com #d87352, #a94f3a e #f7e4dc, e Minimal 7/7/0 com #87958e, #53635b e #f3f6f4. A ordem é largura, raio, borda e depois controle, hover e trilho.

Personalizado é um estado, não uma quinta predefinição: a entrada continua oculta na lista, aparece como rótulo selecionado assim que um campo é editado e escolhê-la não sobrescreve os valores na tela. Redefinir restaura os padrões do Forest e limpa a linha de status.

Limites, cobertura de navegadores e processamento local

A largura é limitada a 4–28 px, o raio a 0–30 px e a borda do controle a 0–6 px; todo valor é arredondado para pixels inteiros na confirmação. Chromium e Safari respeitam a largura em pixels e as cores pelos pseudoelementos ::-webkit-scrollbar, enquanto o Firefox atende apenas scrollbar-width e scrollbar-color, então vale conferir o resultado nos dois motores antes de publicar — a prévia mostra o navegador que você está usando.

Tudo roda na página: depois de carregar, trocar predefinições, digitar uma largura, escolher uma cor, copiar e redefinir não houve nenhuma requisição de rede nos testes em en, fr e ja, e a página não registrou erros de console. O layout permanece dentro da janela de 320 px a 1360 px de largura, sem rolagem horizontal.