Gerador de barra de rolagem CSS

Troque a barra de rolagem cinza padrão por uma versão com as cores do seu site: ajuste largura, cores e arredondamento, visualize ao vivo e copie o código CSS pronto para usar. Tudo é calculado localmente no seu navegador.

Beispiele:

Breite: 10px

Rundung: 8px

Farbe der Leiste (Track)

Farbe des Schiebers (Thumb)

Farbe beim Überfahren

Linha de conteúdo rolável nº 1 — role para ver a barra.

Linha de conteúdo rolável nº 2 — role para ver a barra.

Linha de conteúdo rolável nº 3 — role para ver a barra.

Linha de conteúdo rolável nº 4 — role para ver a barra.

Linha de conteúdo rolável nº 5 — role para ver a barra.

Linha de conteúdo rolável nº 6 — role para ver a barra.

Linha de conteúdo rolável nº 7 — role para ver a barra.

Linha de conteúdo rolável nº 8 — role para ver a barra.

Linha de conteúdo rolável nº 9 — role para ver a barra.

Linha de conteúdo rolável nº 10 — role para ver a barra.

Linha de conteúdo rolável nº 11 — role para ver a barra.

Linha de conteúdo rolável nº 12 — role para ver a barra.

A pré-visualização usa as propriedades ::-webkit-scrollbar (Chrome, Edge, Safari) e scrollbar-color (Firefox); o resultado pode variar um pouco conforme o seu navegador.

CSS-Code

.byteryo-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e1e2e;
}

.byteryo-custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e2e;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

So funktioniert es

Não existe uma única propriedade CSS padrão para estilizar uma barra de rolagem: os navegadores baseados em Chromium (Chrome, Edge, Safari) usam os pseudoelementos ::-webkit-scrollbar, enquanto o Firefox usa as propriedades scrollbar-width e scrollbar-color. Esta ferramenta gera os dois ao mesmo tempo, em um bloco CSS restrito a uma classe, para que o resultado se aplique apenas ao contêiner que você escolher, e não à página inteira.

Wie wende ich diesen Code auf meinen eigenen Container an?

Copie o CSS gerado, renomeie a classe byteryo-custom-scrollbar conforme a sua convenção de nomenclatura e adicione essa classe ao elemento HTML cuja barra de rolagem você quer personalizar (por exemplo, uma div com overflow: auto ou overflow: scroll).

O resultado será idêntico em todos os navegadores?

Não: o Firefox aceita apenas a largura (fina ou automática) e as cores via scrollbar-color, sem arredondamento nem cor separada ao passar o mouse, enquanto os navegadores baseados em Chromium permitem um controle mais fino. O código gerado cobre o melhor resultado possível em cada mecanismo, mas uma pequena diferença visual entre navegadores é normal.

O código CSS é composto inteiramente no seu navegador: nenhum dado é enviado a um servidor durante a geração.