Ir para o conteúdo
TextArray1.87.0
Totalmente local

Gerador de estilo de scrollbar CSS

Gera as regras CSS ::-webkit-scrollbar e scrollbar-width/scrollbar-color personalizadas.

Saída
Ferramentas relacionadas
Gerador de CSS box-shadowFerramentas de desenvolvedor
Extrator de variáveis de cor CSSFerramentas de desenvolvedor
Gerador de easing e transição CSSnovoFerramentas de desenvolvedor
diferença de chave i18nFerramentas de desenvolvedor
Conversor de TOML para JSONFerramentas de desenvolvedor
SQL para JSONFerramentas de desenvolvedor
Gerador de estilo de scrollbar CSS
A scrollbar predefinida do navegador raramente combina com o resto de um design, e estilizá-la significa memorizar dois especificações diferentes ao mesmo tempo: os pseudo-elementos ::-webkit-scrollbar do WebKit que Chrome, Safari e Edge utilizam, e as propriedades padrão scrollbar-width/scrollbar-color que Firefox lê. Esta ferramenta gera ambas de uma vez a partir de algumas opções, portanto copia um bloco de CSS e cada navegador principal renderiza uma scrollbar correspondente.
Defina um selector alvo — body para a página inteira, ou uma classe como .sidebar para um painel deslocável — depois escolha a largura da scrollbar em pixels, as cores da faixa e do indicador, e a cor para a qual o indicador muda ao passar o rato. O arredondamento do indicador controla o border-radius da barra arrastável, e a margem de inserção adiciona um espaço transparente entre o indicador e a faixa para que pareça uma pílula flutuante em vez de um bloco sólido. A opção Variante alterna entre a scrollbar normal do navegador, uma mais fina chamada "Fina", e "Oculta", que remove a scrollbar completamente com -ms-overflow-style e scrollbar-width: none mantendo o deslocamento próprio do elemento intacto.
Ao ativar a variante de modo escuro, envolve uma segunda cópia das regras num bloco @media (prefers-color-scheme: dark), com as cores da faixa e do indicador automaticamente escurecidas para que um site que já muda de tema tenha uma scrollbar que mude com ele — nenhum cálculo separado necessário. Cada opção atualiza a saída em tempo real conforme ajusta, e o totalizador sob o resultado informa quantos blocos de regra CSS foram gerados e a contagem de caracteres exata.
Tudo corre localmente no seu navegador: nenhum selector, cor ou CSS é alguma vez enviado para um servidor. Copie o resultado diretamente para a sua stylesheet, descarregue como um ficheiro .txt, ou envie para a entrada de outra ferramenta para continuar a refiná-lo.
FAQ
Por que a ferramenta gera regras scrollbar-width e ::-webkit-scrollbar?
Nenhuma propriedade CSS única é suportada em todas as plataformas. Firefox lê as propriedades padrão scrollbar-width e scrollbar-color, enquanto Chrome, Safari e Edge apenas respondem aos pseudo-elementos mais antigos ::-webkit-scrollbar. Gerar ambas significa que a mesma stylesheet funciona em todos os navegadores.
A variante "Oculta" impede o elemento de se deslocar?
Não. Apenas oculta a faixa de scrollbar visual e o indicador usando scrollbar-width: none e -ms-overflow-style: none. O elemento ainda se desloca normalmente com uma roda de rato, trackpad ou toque — o conteúdo simplesmente não tem scrollbar visível.
O que a margem de inserção do indicador realmente faz?
Adiciona uma margem transparente em torno do indicador com background-clip: padding-box, que encolhe o preenchimento visível para dentro das bordas da faixa. Esse espaço é o que faz um indicador parecer uma pílula arredondada em vez de uma barra que toca ambos os lados da scrollbar.
Como são calculadas as cores do modo escuro?
Cada cor que define é misturada em direção ao preto por uma quantidade fixa e colocada num bloco @media (prefers-color-scheme: dark), portanto um site que usa modo escuro automático obtém uma faixa e um indicador proporcionalmente mais escuros sem que escolha um segundo conjunto de cores à mão.
O meu CSS ou as cores que escolho são carregadas em algum lugar?
Não. O CSS da scrollbar é gerado completamente no seu navegador — nada que digite ou selecione sai alguma vez do seu dispositivo.