Barras de rolagem estilizadas com CSS

Algo pouco falado em artigos sobre CSS são as barras de rolagem. Geralmente elas não estão presentes nem em layouts para aprovação, e se aparecem, provavelmente só irão ser notadas se forem muito excêntricas. Afinal, barra de rolagem boa é aquela que não é notada.

No entanto, personalizá-las pode dar um pequeno ganho na experiência de uso de seu site ou aplicativo, especialmente se você tem algum conteúdo maior do que o elemento que a comporta. As barras padrão do navegador ou sistema operacional nem sempre vão agradar esteticamente.

Neste artigo eu dou uma pequena dica de como implementar barras de rolagem personalizadas em qualquer site, usando apenas CSS.

Limitações e motores de renderização

Não há uma forma única de estilizar as barras de rolagem, pois os navegadores não chegaram a um consenso sobre qual a melhor forma de chegar neste objetivo. Atualmente temos apenas três renderizadores de HTML no mercado: Webkit, Blink e Gecko.

Motores Webkit e Blink

Como o Blink é uma derivação do Webkit, o método usado para estilizar as barras é o mesmo. Safari, Gnome Web e outros navegadores menos conhecidos usam Webkit; Google Chrome e seus derivados Brave, Opera, Vivaldi e Edge usam Blink. Isto significa que ao usar este método, você irá cobrir mais de 90% dos usuários.

Este método usa pseudo-elementos do CSS para representar as diferentes partes. Estes não estão presentes no CSS padrão, portanto prefixos do navegador -webkit- são necessários.

Eis elementos:

::-webkit-scrollbar: representa o "corpo" da barra, geralmente usado para definir os aspectos gerais, como largura e altura.
::-webkit-scrollbar-track: a trilha por onde a alça caminha.
::-webkit-scrollbar-thumb: a alça propriamente dita.

Existem outros além destes, mas a sua utilização é muito específica é geralmente desnecessária. Segue abaixo um exemplo do código, para uma barra de rolagem bem discreta.

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* A altura só é vista quando a rolagem é horizontal */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

Apesar de a personalização com este método ser bastante poderosa, a W3C, instituição responsável pelos padrões da internet, abandonou esta especificação. E no futuro será descontinuada.

No Gecko

Gecko é o motor de renderização usado pelo Firefox e seus derivados Librewolf, TOR Browser, SeaMonkey, Waterfox e IceCat. Ao contrário dos navegadores baseados em Webkit e Blink, o Gecko segue as especificações da W3C. Em vez de usar pseudo-elementos, usam-se regras normais do CSS para este fim.

Eis as regras:

scrollbar-width: largura ou altura da barra.
scrollbar-color: cores da alça (primeira cor) e da trilha (segunda cor).

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

Este método é bem mais elegante, porém menos poderoso. É importante ressaltar que nenhum navegador implementa totalmente esta especificação. Se desejar usar estas regras em navegadores baseados no Webkit, o prefixo -webkit- deve ser usado.

Conclusão

Enquanto a especificação não amadurece, o seu estilo CSS deverá incorporar os dois métodos. Com isso, o código final ficará assim:

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* A altura só é vista quando a rolagem é horizontal */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

Lembre-se que para observar as barras em elementos, a regra overflow[-x/-y]: scroll deve estar presente.

Até a próxima!

dois:pontos