CSS Scrollbar Customizada

Customizando scrollbars no Chromium, WebKit e Firefox

Scrollbars são um dos últimos elementos de UI que os navegadores ainda pintam com os defaults do sistema operacional — e um dos primeiros que designers querem personalizar. Existem duas APIs paralelas: as pseudo-classes mais antigas com prefixo WebKit/Blink, que funcionam em Chrome, Edge, Safari e Opera, e o novo CSS Scrollbars Module (padronizado pelo W3C) implementado no Firefox e em rollout progressivo nos demais. Projetos modernos usam os dois lado a lado para cobertura completa.

A API padronizada são duas propriedades:

.scrollable {
  scrollbar-width: thin;        /* auto | thin | none */
  scrollbar-color: #4f46e5 #f3f4f6; /* thumb track */
}

O WebKit/Blink oferece controle mais fino via pseudo-elementos:

.scrollable::-webkit-scrollbar       { width: 8px; height: 8px; }
.scrollable::-webkit-scrollbar-track { background: #f3f4f6; }
.scrollable::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 4px; }
.scrollable::-webkit-scrollbar-thumb:hover { background: #4338ca; }

Evitando layout shift com scrollbar-gutter

Quando o conteúdo cresce além da viewport e a scrollbar aparece, a área útil encolhe 15-17px — um reflow desagradável. A propriedade scrollbar-gutter: stable (Chrome 94+, Firefox 97+) reserva o espaço de antemão para o layout nunca pular. Combine com stable both-edges para manter simetria visual em idiomas RTL.

Convenções de plataforma com as quais não brigar

O macOS oculta scrollbars quando o trackpad está ocioso e só as mostra durante o scroll. Tentar forçar scrollbar permanente lá deixa o site com cara de não-nativo. iOS e Android renderizam scrollbars como overlays efêmeros — suas regras ::-webkit-scrollbar são amplamente ignoradas no mobile, então foque o design visual no desktop. Windows tradicionalmente mostrava scrollbars persistentes, mas o Windows 11 também caminhou para auto-hide.

Anti-padrões e acessibilidade

• Scrollbars invisíveis (scrollbar-width: none) eliminam a pista visual de que a área é rolável. Se precisar, adicione um fade com mask-image nas bordas ou um indicador "mais".
• Finas demais para arrastar. Usuários com limitação motora precisam de alvo perto do mínimo de 24x24 CSS pixels sugerido pelo WCAG 2.5.8 Target Size. Uma scrollbar de 4px é estilosa, mas impraticável.
• Track e thumb na mesma cor — parece minimalista mas mata a affordance. Mantenha pelo menos 3:1 de contraste entre thumb e track, conforme WCAG 1.4.11.
• Cores chamativas em todas as scrollbars — funciona numa hero section, cansa numa tabela de dados.

Estilo Apple Music: overlay que cresce no hover

Um design popular é uma scrollbar fina ociosa que cresce no hover. Com WebKit:

.scrollable::-webkit-scrollbar { width: 6px; transition: width .2s; }
.scrollable:hover::-webkit-scrollbar { width: 12px; }

Perguntas frequentes

Preciso usar as propriedades do Firefox e os pseudo-elementos do WebKit ao mesmo tempo? Sim, até chegar a paridade. Os navegadores ignoram regras que não entendem, então escrever os dois blocos é seguro e dá cobertura completa em todos os engines.

Como esconder a scrollbar mas manter o scroll funcionando? Use scrollbar-width: none (Firefox) e ::-webkit-scrollbar { display: none } (Chrome/Safari). Scroll por roda, toque e teclado continuam funcionando. Lembre de adicionar alguma affordance visual de scroll.

Posso estilizar a scrollbar horizontal de forma diferente? Sim — alvo ::-webkit-scrollbar:horizontal e ::-webkit-scrollbar:vertical separadamente. O Firefox não expõe hooks de orientação; o mesmo scrollbar-color vale para as duas.

Devo usar um polyfill JavaScript como SimpleBar? Só se precisar de overlay scroll em toda plataforma, independente do setting do SO. Para a maioria dos sites, a abordagem CSS é suficiente, não adiciona peso e mantém acessibilidade por padrão.