Tutorial

Como estilizar barras de rolagem com o CSS

Published on February 19, 2021
authorauthor

William Le and Bradley Kouchi

Português
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:

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:

Captura de tela de uma página de exemplo com uma barra de rolagem personalizada sendo uma barra de rolagem azul em uma faixa laranja.

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:

Captura de tela de uma página de exemplo com uma barra de rolagem personalizada sendo uma barra de rolagem azul em uma faixa laranja.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
William Le

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more