🍭 CSS | Barra de rolagem colorida no Google Chrome

Tutorial atualizado dia 14/05/2022.

Este post poderia ter sido publicado mais cedo, só que eu fiquei empolgada testando 1001 peruices com o código e criando exemplos. Adoro barra de rolagem colorida! #prontoconfessei

Para quem ainda é inocente na internet (sabe de nada), esse recurso era muito comum no fim da década de 90 e no início da década passada. Blogueiros e webdesigners (me incluo) usaram e abusaram das barras de rolagem coloridas, até que ficou demodê. Mas, como todo mundo que tem mais de 20 anos já notou, tudo que fica demodê depois de um tempo fica vintage e daí vira moda de novo.

Já no Google Chrome e em todos os navegadores que usam webkit, como Edge e as versões do Opera, você consegue essa modificação usando pseudo-elementos CSS. O código é o seguinte:

::-webkit-scrollbar {background: #99cc00;} /* barra de rolagem toda */ ::-webkit-scrollbar-thumb {background: #ff00ff;} /* parte da barra que se movimenta */ ::-webkit-scrollbar-button {background:#00ff00;} /* ponta da barra de rolagem */ ::-webkit-scrollbar-track {background:#ffff00;} /* fundo da barra de rolagem, parte fixa */ ::-webkit-scrollbar-track-piece {background:#00ffff;} /* fundo da barra de rolagem, parte que ainda falta rolar */ ::-webkit-scrollbar-corner {background:#99cc00;} /* canto inferior direito da barra de rolagem */

Lembrando que é um código CSS, logo tem que ficar na folha de estilos de sua página, ou seja, entre as tags <style> e </style> ou entre as tags <b:skin> e </b:skin>, se você usa Blogger.

No exemplo acima, já coloquei algumas cores e o resultado vai ser uma barra de rolagem preta com fundo branco e pontas verdes, bem simples. Você pode vê-la na página: www.meutedio.com.br/p/barra-de-rolagem-colorida.html.

Abaixo, seguem exemplos mais incrementados.

◆ Barra de rolagem com imagem

Este é o código para uma barra de rolagem mais larga e com imagem:

::-webkit-scrollbar {background:#ffffff; width:30px; height:30px;} ::-webkit-scrollbar-thumb {background:orange url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobPRuV9e85aLQ6MLMsHX4yBWiWFYeglaC2fv9dvyo9L1Topb62hJ5rq_PuUtTUjCZUzuAAULRMweYecqvDFdD5xjJAjiZc8trsXn7JRPVfkDA-PtvIgniKllPsmZ9LtZyjCQnZjTJEhvl/s1600/triangulos.png) repeat;} ::-webkit-scrollbar-track {background:#ffffff;} ::-webkit-scrollbar-corner {background:orange url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgobPRuV9e85aLQ6MLMsHX4yBWiWFYeglaC2fv9dvyo9L1Topb62hJ5rq_PuUtTUjCZUzuAAULRMweYecqvDFdD5xjJAjiZc8trsXn7JRPVfkDA-PtvIgniKllPsmZ9LtZyjCQnZjTJEhvl/s1600/triangulos.png) repeat;}

Quando uso width estou falando da largura da barra de rolagem vertical. Quando uso height, me refiro à altura da barra de rolagem horizontal. Acredito que fica mais elegante quando as duas têm a mesma largura, mas você pode colocá-las em tamanhos diferentes.

Para usar em seu site, troque a URL da imagem por uma de sua preferência.

Veja o código em funcionamento na página de exemplo: www.meutedio.com.br/p/barra-de-rolagem-com-imagem.html.

◆ Barra de rolagem com sombra

Criei também um exemplo com sombra. Segue o código:

::-webkit-scrollbar {background:#ffffff;width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:pink; box-shadow:0px 0px 10px deeppink inset;} ::-webkit-scrollbar-corner {background:pink; box-shadow:0px 0px 10px deeppink inset;} ::-webkit-scrollbar-track {background:#ffffff;}

Veja esta barra na página www.meutedio.com.br/p/barra-de-rolagem-com-sombra.html.

Para saber como personalizar as sombras, visite o post CSS: sombras em caixas em imagens.

◆ Barra de rolagem com borda

Segue uma página com exemplo de barra de rolagem com borda: www.meutedio.com.br/p/barra-de-rolagem-com-borda.html:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:lightyellow; border:2px dashed orange;} ::-webkit-scrollbar-corner {background:#ffffff;} ::-webkit-scrollbar-track {background:#ffffff;}

Para aprender os vários tipos de bordas, visite o post Aprendendo a usar bordas.

◆ Barra de rolagem que muda de cor

Neste exemplo a barra de rolagem muda de cor duas vezes: quando você passa o mouse sobre ela e quando clica na barra:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:purple;} ::-webkit-scrollbar-thumb:hover {background:#ffffff; border:2px solid purple;} ::-webkit-scrollbar-thumb:active {background:deeppink; border:0;} ::-webkit-scrollbar-corner {background:#ffffff;}

Veja em funcionamento na página www.meutedio.com.br/p/barra-de-rolagem-que-muda-de-cor.html.

◆ Barra de rolagem listrada (sem imagem) que muda de cor

Esse código é um pouco mais complexo:

::-webkit-scrollbar {background:#ffffff; width:20px; height:20px;} ::-webkit-scrollbar-thumb {background:repeating-linear-gradient(45deg, transparent, transparent 10px, #990099 10px, #990099 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-thumb:hover {background:repeating-linear-gradient(45deg, transparent, transparent 10px,#99cc00 10px,#99cc00 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-thumb:active {background:repeating-linear-gradient(45deg, transparent, transparent 10px,#0099cc 10px,#0099cc 20px), linear-gradient(to bottom, #eeeeee, #999999);} ::-webkit-scrollbar-corner {background:#ffffff;}

Veja esse bonito recurso funcionando na página www.meutedio.com.br/p/barra-de-rolagem-listrada-sem-imagem.html.

◆ Todos os exemplos:

• Barra de rolagem colorida
• Barra de rolagem com imagem
• Barra de rolagem com sombra
• Barra de rolagem com borda
• Barra de rolagem que muda de cor
• Barra de rolagem listrada (sem imagem) que muda de cor

◆ Mais algumas dicas:

Você pode agrupar vários atributos em uma mesma barra de rolagem, só terá mais trabalho para deixá-la agradável e combinando com o resto do site.

Neste post priorizei cor e tamanho. Para aprender a customizar ainda mais a barra de rolagem, visite o site CSS Tricks.

Caso procure boas imagens pattern, sugiro o site ColourLovers.com. A versão menor da imagem (para usar lado a lado em backgrounds) fica no link Preview.

Para escolher cores, visite os posts:

• Tabela de cores
• Tabela Candy Colors em RGB
• Como usar as cores em RGB
• Cubo de cores seguras

Se você estiver agora no Edge, no Google Chrome, no Opera ou em outro navegador webkit, vai notar que a barra deste blog atualmente (14/05/2022) é #99cc00, que também é a cor de vários outros elementos do blog.

Até mais!