Como estilizar barras de rolagem com o CSS

Introdução

Em setembro de 2018, a W3C CSS Scrollbars definiu especificações para a personalização da aparência de barras de rolagem com o CSS.

Desde 2020, 96% dos usuários da internet já estão utilizando navegadores que suportam a estilização da barra de rolagem do CSS. No entanto, você precisará escrever dois conjuntos de regras CSS para cobrir o Blink e WebKit, bem como os navegadores Firefox.

Neste tutorial, você irá aprender a como usar o CSS para personalizar barras de rolagem para dar suporte a navegadores modernos.

Pré-requisitos

Para acompanhar este artigo, você irá precisar do seguinte:

• Familiaridade com os conceitos de prefixos de fabricantes, pseudoelementos e degradação suave.

Estilizando barras de rolagem no Chrome, Edge e Safari

Atualmente, a estilização de barras de rolagem para o Chrome, Edge e o Safari está disponível com o pseudoelemento do prefixo de fabricante -webkit-scrollbar.

Aqui está um exemplo que usa os pseudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-track e ::webkit-scrollbar-thumb:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Aqui está uma captura de tela da barra de rolagem produzida com essas regras do CSS:

Este código funciona nas versões mais recentes do Chrome, Edge e Safari.

Infelizmente, essa especificação foi oficialmente abandonada pela W3C e provavelmente será descontinuada ao longo do tempo.

Estilizando barras de rolagem no Firefox

Atualmente, a estilização de barras para o Firefox está disponível com as novas CSS Scrollbars.

Aqui está um exemplo que usa as propriedades scrollbar-width e scrollbar-color:

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Aqui está uma captura de tela da barra de rolagem produzida com essas regras do CSS:

Essa especificação possui algumas características em comum com a especificação -webkit-scrollbar para o controle da cor da barra de rolagem. No entanto, atualmente, não há suporte para modificar o preenchimento e arredondamento para o “track thumb”.

Construindo estilos de barra de rolagem à prova do tempo

É possível escrever seu CSS de forma a suportar tanto as especificações de -webkit-scrollbar quanto das CSS Scrollbars.

Aqui está um exemplo que usa scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track e ::webkit-scrollbar-thumb:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Os navegadores Blink e WebKit irão ignorar as regras que eles não reconhecem e aplicar as regras de -webkit-scrollbar. Os navegadores Firefox irão ignorar as regras que não reconhecem e aplicar as regras de CSS Scrollbars . Assim que os navegadores Blink e WebKit descontinuarem totalmente a especificação -webkit-scrollbar, eles passarão a utilizar as novas especificações das CSS Scrollbars.

Conclusão

Neste artigo, foi apresentada a utilização do CSS para estilizar barras de rolagem e como garantir que esses estilos sejam reconhecidos na maioria dos navegadores modernos.

Também é possível simular uma barra de rolagem escondendo a barra de rolagem padrão e usando o JavaScript para detectar a altura e a posição de rolagem. No entanto, essas abordagens enfrentam limitações com a reprodução de experiências como a rolagem por inércia (por exemplo, o movimento em decadência ao fazer a rolagem com trackpads).

Se quiser aprender mais sobre o CSS, confira nossa página de tópico do CSS para exercícios e projetos de programação.