Gerador de Scrollbar CSS

O Gerador de Scrollbar CSS é uma ferramenta online gratuita que permite personalizar o design das barras de rolagem do seu site e criar instantaneamente o código CSS necessário.
Basta operar os controles deslizantes e seletores de cores para ajustar os estilos do polegar e da faixa, como cores, largura e raio da borda, enquanto visualiza as pré-visualizações em tempo real.
O código gerado é compatível não apenas com navegadores WebKit, como Chrome, Safari e Edge, mas também oferece suporte ao Firefox via scrollbar-color e scrollbar-width. Todo o processamento é concluído no seu navegador, tornando-o seguro, rápido e gratuito para usar sem qualquer instalação ou registro.

Prefixo WebKit (::-webkit-scrollbar)

Um pseudo-elemento CSS não padrão usado para personalizar barras de rolagem em navegadores baseados nos motores WebKit/Blink, como Chrome, Safari e Edge. Permite designs altamente personalizáveis.

Faixa (Track)

O fundo ou o sulco da barra de rolagem. Você pode estilizá-lo usando ::-webkit-scrollbar-track para definir sua cor de fundo ou sombras internas.

Polegar (Thumb)

A parte arrastável da barra de rolagem que indica a posição de rolagem. É estilizado usando ::-webkit-scrollbar-thumb para ajustar sua cor e raio da borda.

scrollbar-color e scrollbar-width

Propriedades CSS padrão do W3C suportadas por navegadores como Firefox que não suportam prefixos WebKit. Elas permitem definir as cores do polegar e da faixa e definir a largura (auto, thin ou none).

Compatibilidade Multiplataforma

A capacidade de um site funcionar e ser exibido de forma consistente em diferentes navegadores da web (Chrome, Firefox, Safari, etc.). Nossa ferramenta gera código que funciona perfeitamente nos principais navegadores.

Q.O CSS gerado funcionará em smartphones?

Sim, funciona em navegadores móveis baseados em WebKit, como Safari no iOS e Chrome no Android. No entanto, dependendo das especificações do sistema operacional, a barra de rolagem pode aparecer apenas durante a rolagem.

Q.Posso aplicar a barra de rolagem apenas a um elemento específico (como uma div)?

Sim, você pode. Basta substituir .custom-scrollbar no código gerado pela classe ou ID do seu elemento específico (por exemplo, .my-container ou #scroll-box).

Q.É compatível com o navegador Firefox?

Sim, é. Esta ferramenta gera automaticamente não apenas pseudo-elementos do WebKit, mas também as propriedades padrão do W3C scrollbar-color e scrollbar-width para o Firefox.

Q.Meus dados são salvos em um servidor ao usar esta ferramenta?

Não, não são. Esta ferramenta é executada inteiramente no seu navegador usando JavaScript, portanto, suas configurações e códigos gerados nunca são enviados a servidores externos.

Q.Como posso ocultar completamente a barra de rolagem?

Para ocultar a barra de rolagem mantendo a funcionalidade de rolagem, você pode usar ::-webkit-scrollbar { display: none; } para WebKit e scrollbar-width: none; para Firefox.