Use as propriedades scrollbar-width e scrollbar-color para definir o estilo das barras de rolagem.
Introdução
A partir da versão 2 do Chrome, é possível estilizar barras de rolagem com os pseudoelementos ::-webkit-scrollbar-*. Essa abordagem funciona bem no Chrome e no Safari, mas nunca foi padronizada pelo CSS Working Group.
Os elementos padronizados são as propriedades scrollbar-width e scrollbar-color, que fazem parte da especificação de nível 1 do módulo de estilo de barras de rolagem do CSS (em inglês). Essas propriedades são compatíveis a partir do Chrome 121.
Introdução às barras de rolagem
Anatomia de uma barra de rolagem
Uma barra de rolagem consiste, no mínimo, em uma faixa e um polegar. A faixa é a área onde o polegar pode se mover. Ela representa toda a distância de rolagem. O círculo representa a posição atual dentro da região rolável. Conforme você rola a tela, ele se move dentro da faixa. O polegar também pode ser arrastado.
No entanto, as barras de rolagem podem ter mais partes do que apenas o círculo e a faixa. Por exemplo, uma barra de rolagem pode ter um ou mais botões para aumentar ou diminuir o deslocamento de rolagem. As partes que compõem uma barra de rolagem são determinadas pelo sistema operacional subjacente.
Barras de rolagem clássicas e de sobreposição
Antes de ver como definir o estilo das barras de rolagem, é importante entender a distinção entre dois tipos de barras de rolagem.
Barras de rolagem de sobreposição
Barras de rolagem de sobreposição são barras de rolagem flutuantes renderizadas sobre o conteúdo abaixo dele. Eles não são mostrados por padrão, mas apenas enquanto você está rolando a tela. Geralmente, eles são semitransparentes para manter o conteúdo visível, mas cabe ao sistema operacional decidir. Ao interagir com eles, o tamanho deles também pode variar.
Barras de rolagem clássicas
As barras de rolagem clássicas são posicionadas em uma calha da barra de rolagem dedicada. A medianiz da barra de rolagem é o espaço entre a borda interna e a borda externa do padding. Essas barras de rolagem geralmente são opacas (não transparentes) e ocupam espaço do conteúdo adjacente.
As propriedades scrollbar-color e scrollbar-width
Atribuir cores às barras de rolagem com scrollbar-color
A propriedade scrollbar-color permite mudar o esquema de cores das barras de rolagem. A propriedade aceita dois valores <color>. O primeiro valor de <color> determina a cor do círculo, e o segundo a cor a ser usada na faixa.
.scroller {
scrollbar-color: hotpink blue;
}
Quando uma barra de rolagem de sobreposição é usada, a cor da faixa não tem efeito por padrão. No entanto, a faixa aparece quando você passa o cursor sobre ela.
scrollbar-colorPara usar a renderização padrão fornecida pelo sistema operacional, use auto como valor.
Mudar o tamanho da barra de rolagem com scrollbar-width
A propriedade scrollbar-width permite escolher uma barra de rolagem mais estreita ou até mesmo ocultar completamente a barra de rolagem sem afetar a rolagem.
Os valores aceitos são auto, thin e none.
auto: a largura padrão da barra de rolagem, conforme fornecida pela plataforma.thin: uma variante fina da barra de rolagem fornecida pela plataforma ou uma barra de rolagem personalizada mais fina que a barra de rolagem da plataforma padrão.none: oculta a barra de rolagem de maneira eficaz. No entanto, o elemento ainda pode ser rolável.
Não é possível usar um <length>, como 16px, como o valor para scrollbar-width.
.scroller {
scrollbar-width: thin;
}
Ao usar uma barra de rolagem de sobreposição, o círculo só é desenhado enquanto você rola ativamente a área de rolagem.
scrollbar-widthSuporte a versões mais antigas de navegadores
Para versões de navegadores que não são compatíveis com scrollbar-color e scrollbar-width, é possível usar as novas propriedades scrollbar-* e ::-webkit-scrollbar-*.
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
scrollbar-* com um substituto para ::-webkit-scrollbar-*Quando você define width ou height de ::-webkit-scrollbar, uma barra de rolagem de sobreposição sempre é exibida, transformando-a em uma barra de rolagem clássica.
Para manter a ilusão, você pode optar por alterar as cores somente ao passar o cursor sobre o botão.
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
scrollbar-* com um substituto para ::-webkit-scrollbar-*, aplicando somente as cores ::-webkit-scrollbar-* ao passar o cursor