Estilização da Barra de Rolagem com ::-webkit-scrollbar
Personalize a aparência da barra de rolagem usando pseudo-elementos do WebKit e a propriedade scrollbar-color.
Estilização da Barra de Rolagem com ::-webkit-scrollbar é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Visão geral da estilização de barras de rolagem
Os navegadores renderizam barras de rolagem padrão que variam entre os sistemas operacionais. CSS permite personalizar a aparência das barras de rolagem usando pseudoelementos não padrão de WebKit e as propriedades padrão modernas.
::-webkit-scrollbar
O pseudoelemento raiz de toda a barra de rolagem. Defina a largura (vertical) e a altura (horizontal):
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
A trilha é o canal de fundo ao longo do qual o controle deslizante se move:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
O controle deslizante é o indicador de rolagem que pode ser arrastado:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Barra de rolagem personalizada completa
Uma implementação completa de barra de rolagem personalizada:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Padrão moderno: scrollbar-color
scrollbar-color é a propriedade padronizada compatível com o Firefox. Ela define as cores do controle deslizante e da trilha em uma única declaração:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Padrão moderno: scrollbar-width
scrollbar-width controla o tamanho da barra de rolagem com valores de palavras-chave:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Estilização de barras de rolagem entre navegadores
Para obter compatibilidade completa entre navegadores, use as duas abordagens:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Ocultar barras de rolagem mantendo a rolagem
Torne um elemento rolável, mas oculte visualmente a barra de rolagem:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Barras de rolagem no modo escuro
Use a propriedade CSS color-scheme para obter barras de rolagem escuras nativas do sistema operacional sem estilização personalizada:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>Lembrete de acessibilidade
Não torne as barras de rolagem pequenas demais nem invisíveis de modo que seja difícil descobrir como rolar. Barras de rolagem ocultas são aceitáveis em designs voltados ao toque, mas podem causar confusão em computadores.
Verificação rápida
Qual propriedade CSS padronizada define as cores das barras de rolagem e é compatível com o Firefox?
Recapitulação
Personalize as barras de rolagem com os pseudoelementos ::-webkit-scrollbar (WebKit) e as propriedades padrão scrollbar-color/scrollbar-width (Firefox e navegadores modernos). Use ambas as abordagens para obter compatibilidade completa entre navegadores. Use scrollbar-width: none e o equivalente de WebKit para ocultar as barras de rolagem preservando a funcionalidade de rolagem.
Perguntas Frequentes
A aula “Estilização da Barra de Rolagem com ::-webkit-scrollbar” é grátis?
Sim — o texto completo de “Estilização da Barra de Rolagem com ::-webkit-scrollbar” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Estilização da Barra de Rolagem com ::-webkit-scrollbar”?
Personalize a aparência da barra de rolagem usando pseudo-elementos do WebKit e a propriedade scrollbar-color. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Estilização da Barra de Rolagem com ::-webkit-scrollbar”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type e scroll-snap-align
- Estilização da Barra de Rolagem com ::-webkit-scrollbar