A barra de deslocamento cinzenta padrão do navegador funciona como um cartão de visita feito num criador de sites gratuito: cumpre a função, mas deixa uma impressão medíocre. É especialmente notória quando todo o site está perfeito ao píxel, as fontes são cuidadosamente escolhidas, as cores estão polidas, e depois há esta barra angular a sobressair da era do Internet Explorer no lado direito.

Os programadores evitam frequentemente o tópico. Não porque seja difícil, quatro linhas de CSS resolvem o problema. Pelo contrário, os mitos atrapalham: «só funciona no Chrome», «os utilizadores não reparam», «é um truque, não uma funcionalidade de produção».

Na realidade, o padrão W3C cobre o básico com duas propriedades, e os pseudo-elementos do WebKit dão-lhe controlo sobre cada detalhe, desde o arredondamento aos gradientes. Compilei ambas as abordagens num tutorial: da especificação ao código pronto para produção e compatível com vários navegadores, que não terá vergonha de colocar em produção.

💡 Visão geral rápida:

• Configure a barra de deslocamento usando scrollbar-width e scrollbar-color: duas linhas, compatibilidade total entre navegadores, sem prefixos.
• Domine ::-webkit-scrollbar e os seus descendentes para um controlo refinado da calha, do polegar e dos cantos.
• Construa uma solução compatível com vários navegadores: o padrão para o Firefox, pseudo-elementos para Chrome/Safari/Edge, sem conflitos.
• Examine os erros comuns: especificidade, acessibilidade, botões em falta, armadilhas dos navegadores móveis.

Porquê estilizar a barra de deslocamento

O primeiro e principal argumento é a coesão visual. Imagine uma landing page escura com detalhes néon e uma barra de deslocamento branca e brilhante à direita. Ou um site minimalista claro onde a barra de deslocamento é o único elemento que quebra a paleta de cores. Tecnicamente não é um bug, mas parece inacabado.

O segundo ponto é a marca. Uma barra de deslocamento colorida torna-se parte da linguagem visual: um polegar verde para um serviço de entrega de refeições saudáveis, laranja para uma plataforma de reservas. Um pequeno detalhe que reforça a associação sem banners e popups adicionais.

Terceiro, a gestão da atenção. Uma barra de deslocamento fina e semitransparente não rouba o foco do conteúdo. Em landing pages longas, uma barra estreita não consome visualmente píxeis de largura preciosos, e em layouts móveis com margens laterais, cada píxel conta.

E o ponto-chave: isto não é um truque para geeks. As propriedades scrollbar-width e scrollbar-color fazem parte da especificação CSS Scrollbars Styling Module Level 1 e são suportadas por todos os navegadores atuais. De acordo com os dados do Can I Use de junho de 2026, a cobertura das propriedades padrão excede 95% dos utilizadores, a era dos prefixos de fornecedor para barras de deslocamento terminou.

Abordagem padrão: scrollbar-width e scrollbar-color

O método mais simples e fiável. Duas propriedades sem prefixos, sintaxe clara, funciona no Firefox, Chrome, Edge e Safari.

Sintaxe básica

1
body {
2
  scrollbar-width: thin;
3
  scrollbar-color: #4a90d9 #f0f0f0;
4
}

O primeiro valor em scrollbar-color é a cor do polegar, o segundo é a cor da calha. A propriedade scrollbar-width aceita três valores:

• auto, largura padrão (cerca de 17px no Windows, 15px no macOS com um rato);
• thin, barra de deslocamento fina (cerca de 8px);
• none, oculta completamente a barra de deslocamento (o scroll ainda funciona, mas o utilizador pode não se aperceber de que o conteúdo desliza, use com cautela).

Exemplo para tema escuro

1
html {
2
  scrollbar-width: thin;
3
  scrollbar-color: #555 #1e1e1e;
4
}

Resultado: uma calha escura a condizer com a cor de fundo e um polegar cinzento. Nada quebra a paleta, duas linhas de código.

Limitações do padrão

A especificação é intencionalmente minimalista: não pode definir raio de borda, sombras, gradientes ou efeitos de hover. Isto é um compromisso entre a personalização e a preservação da usabilidade, uma barra de deslocamento excessivamente fora do padrão quebra o modelo de interação familiar. Se o conjunto padrão não for suficiente, ligue os pseudo-elementos do WebKit.

Ajuste fino através de::-webkit-scrollbar

O conjunto de pseudo-elementos ::-webkit-scrollbar-* não faz parte do padrão W3C, mas é suportado pelos navegadores WebKit e Blink: Chrome, Edge, Safari, Opera, Brave, Arc. A cobertura, de acordo com as estatísticas do Can I Use, compreende a vasta maioria dos utilizadores de desktop.

Arquitetura da barra de deslocamento no WebKit

Uma barra de deslocamento do navegador consiste em sete partes, cada uma com o seu próprio pseudo-elemento:

Na prática, a grande maioria das tarefas resolve-se com três: scrollbar, track e thumb. Os restantes são para soluções de design específicas.

Exemplo: barra de deslocamento elegante para um blogue

1
::-webkit-scrollbar {
2
  width: 6px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: transparent;
7
}
8
 
9
::-webkit-scrollbar-thumb {
10
  background: #c1c1c1;
11
  border-radius: 3px;
12
}
13
 
14
::-webkit-scrollbar-thumb:hover {
15
  background: #a0a0a0;
16
}

Seis píxeis de largura, calha transparente (invisível sem deslocamento), polegar arredondado com escurecimento ao passar o rato. A barra de deslocamento não grita por atenção, mas parece moderna.

Exemplo com gradiente para uma landing page

1
::-webkit-scrollbar {
2
  width: 8px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: #1a1a2e;
7
  border-radius: 4px;
8
}
9
 
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(180deg, #e94560, #0f3460);
12
  border-radius: 4px;
13
  border: 1px solid #16213e;
14
}
15
 
16
::-webkit-scrollbar-thumb:hover {
17
  background: linear-gradient(180deg, #ff6b81, #1a508b);
18
}

Gradiente vertical no polegar, calha escura, borda fina para separar do fundo. Três linhas adicionais à base, a página ganha uma sensação diferente.

Ocultar a barra de deslocamento sem perder o scroll

Técnica clássica para janelas modais e menus de hambúrguer:

1
.hide-scrollbar {
2
  overflow-y: scroll;
3
  scrollbar-width: none;
4
}
5
 
6
.hide-scrollbar::-webkit-scrollbar {
7
  display: none;
8
}

O contentor permanece deslizável, mas a barra desaparece tanto no Firefox (scrollbar-width: none) como nos navegadores WebKit (display: none no próprio ::-webkit-scrollbar).

Solução compatível com vários navegadores

Combine o padrão e os pseudo-elementos num bloco, a cobertura é quase completa:

1
/* W3C standard — Firefox, modern Chrome/Edge/Safari */
2
html {
3
  scrollbar-width: thin;
4
  scrollbar-color: #888 #f1f1f1;
5
}
6
 
7
/* WebKit pseudo-elements — detailed styling for Chrome/Safari/Edge */
8
::-webkit-scrollbar {
9
  width: 8px;
10
}
11
 
12
::-webkit-scrollbar-track {
13
  background: #f1f1f1;
14
  border-radius: 4px;
15
}
16
 
17
::-webkit-scrollbar-thumb {
18
  background: #888;
19
  border-radius: 4px;
20
}
21
 
22
::-webkit-scrollbar-thumb:hover {
23
  background: #555;
24
}

A ordem importa: propriedades padrão primeiro, depois pseudo-elementos. Os navegadores com suporte padrão aplicam scrollbar-color e ignoram ::-webkit-scrollbar-*, conforme a especificação exige. Os navegadores sem suporte padrão usam pseudo-elementos. Não surge nenhum conflito.

Onde inserir o código

Três opções, do simples ao flexível:

• Globalmente no style.css do tema. Adequado se o estilo da barra de deslocamento for o mesmo para todo o site. Desvantagem: as alterações perder-se-ão na atualização do tema.
• Na secção "Estilos adicionais" do personalizador. Caminho: Aparência → Personalizar → Estilos adicionais. Método seguro para WordPress: os estilos residem nas definições do tema e não são repostos na atualização.
• Através de um plugin como Code Snippets. Se precisar de definir especificamente a barra de deslocamento para certas páginas através de classes CSS.

Num tema filho, os estilos são ligados através de um ficheiro separado via wp_enqueue_scripts com o hook wp_head.

Erros comuns ao estilizar

Compatibilidade entre navegadores esquecida. Define apenas ::-webkit-scrollbar, a barra padrão permanece no Firefox. Adicione sempre scrollbar-width e scrollbar-color como um par acima no código.

Barra de deslocamento demasiado fina. Com 2-3px de largura em ::-webkit-scrollbar, clicar no polegar com o rato torna-se uma tarefa de motricidade fina. Especialmente crítico em portáteis sem rato externo. A largura mínima confortável é de 6px.

Contraste zero. Polegar cinzento sobre calha cinzenta funde-se numa mancha. O contraste mínimo de cor entre o polegar e a calha é de 3:1, um requisito das WCAG 2.1 AA para elementos de interface.

Sobrepor todos os pseudo-elementos desnecessariamente. O código incha, efeito zero. Na maioria dos casos, scrollbar, track e thumb são suficientes. Toque nos botões (button) e no canto (corner) apenas se o design realmente o exigir.

Fuga de estilo para todo o body. Definir em * ou html sem restrições também estiliza as barras de deslocamento internas: campos de texto, blocos de código, listas suspensas. Para pré-visualizações de código, isto é quase sempre desnecessário. Use seletores de classe: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Perguntas frequentes

O estilo da barra de deslocamento funciona em dispositivos móveis?

Não, nos navegadores móveis a barra de deslocamento não é exibida estaticamente, só aparece durante o deslocamento e é controlada pelo sistema operativo. O estilo CSS não se aplica no iOS e Android. Mas isto não é um problema: no móvel, a barra de deslocamento não é um elemento de interface permanente. Verificado no Safari do iOS 18 e no Chrome do Android 15, os estilos personalizados são ignorados, o indicador do sistema é usado. Em tablets com um teclado externo, a barra de deslocamento pode ser exibida permanentemente, e os estilos funcionam.

Como estilizar a barra de deslocamento horizontal separadamente da vertical?

Através de pseudo-elementos com prefixo de direção: ::-webkit-scrollbar-horizontal e ::-webkit-scrollbar-vertical. Na prática, raramente são usados, o suporte é pior do que para os pseudo-elementos principais. É mais fiável anexar estilos a um contentor específico com o tipo de deslocamento necessário através de um seletor de classe. Para deslocamento horizontal dentro de um bloco de código: .code-block::-webkit-scrollbar { height: 4px; } define a altura da barra de deslocamento horizontal, e .code-block::-webkit-scrollbar-thumb { background: #666; } estiliza o polegar. As propriedades padrão scrollbar-width e scrollbar-color funcionam da mesma forma para ambas as direções.

Pode animar a barra de deslocamento ao passar o rato?

Sim, através de transition em ::-webkit-scrollbar-thumb. Mas o suporte a transition em pseudo-elementos é incompleto: Chrome e Edge funcionam, o Safari pode ter falhas. Por isso, usa-se mais frequentemente a mudança de cor através de :hover sem animação, é mais fiável e parece limpo. Variante funcional: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } muda suavemente a cor do polegar. Não aplique transition a width: mudar a largura da barra de deslocamento ao passar o rato desloca o conteúdo e irrita.

Como estilizar a barra de deslocamento dentro de um bloco específico, e não em toda a página?

Use um seletor composto: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Para propriedades padrão: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Funciona para qualquer contentor com overflow-y: auto ou overflow-y: scroll. Não use o seletor * para a barra de deslocamento, isso afetará campos de texto e listas suspensas.

É obrigatório duplicar estilos para ::-webkit-scrollbar e propriedades padrão?

Sim, se for necessária compatibilidade entre navegadores. O Firefox usa apenas scrollbar-width e scrollbar-color, ignorando os pseudo-elementos. O Chrome e o Edge a partir da versão 121 suportam ambos os mecanismos, mas aplicam as propriedades padrão com prioridade, os pseudo-elementos neles funcionam como fallback para versões mais antigas. Quatro linhas de código (duas para o padrão, duas para o WebKit) cobrem todos os navegadores sem conflitos.

Vale a pena estilizar a barra de deslocamento em 2026

Definitivamente sim, se está a construir um site público. Duas linhas de CSS padrão dão-lhe uma barra de deslocamento elegante que não quebra o design e não requer polyfills. Para landing pages e projetos de marca, os pseudo-elementos do WebKit adicionam individualidade sem prejudicar o desempenho.

A regra principal é não exagerar. A barra de deslocamento continua a ser um elemento de interface funcional, não uma tela para experiências. Largura mínima de 6px, contraste não inferior a 3:1, sem animações de largura, e o utilizador nem sequer notará que a barra de deslocamento está estilizada. E é exatamente esse o sinal de um bom trabalho.

Se o site for em WordPress, coloque o código nos estilos adicionais do personalizador, demora um minuto. O resultado permanecerá consigo através das atualizações do tema e agradará aos olhos de todos os que percorrem a página até ao fim.