A estilização de barra de rolagem com -webkit-scrollbar
é um recurso exclusivo para navegadores baseados em Webkit (como Safari) e baseados em Blink (exemplo Chrome e Chromium).
Para navegadores modernos provavelmente no futuro (https://drafts4.csswg.org/css-scrollbars-1/#scrollbar-color) irão usar scrollbar-color
e scrollbar-width
, mas por enquanto é só aceito nos navegadores baseados no Firefox
Exemplo de uso para customizar todos scrolls, incluindo em elementos com overflow:auto
e overflow:scroll
:
html, html * {
scrollbar-color: rgba(0,0,0,.2) #dfdfdf;
scrollbar-width: thin;
}
Propriedade scrollbar-color:
scrollbar-color: <cor do thumb/elemento que arrasta> <cor do track/barra>;
Propriedade scrollbar-width:
O scrollbar-width
só aceita 3 valores, thin
, auto
, none
É importante notar que no macOS é preciso habilitar para poder customizar.
Você pode combinar essas propriedades com as propriedades ::-webkit-scrollbar-*
para ter alguma customização semelhante, exemplo:
html, html * {
scrollbar-color: rgba(0,0,0,.2) #dfdfdf;
scrollbar-width: thin;
}
::-webkit-scrollbar {
background-color: #dfdfdf;
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0,.5);
}
Esse provavelmente é o máximo que vai conseguir de customização
Internet Explorer (legado)
Apenas para mencionar, até o a versão 8 do Internet Explorer as seguintes propriedades eram suportadas:
Propriedade |
Descrição |
scrollbar-3dlight-color |
Define a cor das bordas superior e esquerda da caixa de rolagem e das setas de rolagem de uma barra de rolagem |
scrollbar-arrow-color |
Define a cor dos elementos de seta de uma seta de rolagem |
scrollbar-base-color |
Define a cor dos elementos principais de uma barra de rolagem, que incluem a caixa de rolagem, a trilha e as setas de rolagem |
scrollbar-darkshadow-color |
Define a cor da sarjeta de uma barra de rolagem |
scrollbar-face-color |
Define a cor da caixa de rolagem e setas de rolagem de uma barra de rolagem |
scrollbar-highlight-color |
Define a cor das bordas superior e esquerda da caixa de rolagem e das setas de rolagem de uma barra de rolagem |
scrollbar-shadow-color |
Define a cor das bordas inferior e direita da caixa de rolagem e das setas de rolagem de uma barra de rolagem. |
scrollbar-track-color |
Define a cor do elemento de trilha de uma barra de rolagem |
Opinião pessoal sobre estilizar certas coisas
Eu entendo perfeitamente essa fascinação por enfeitar visualmente certas coisas, mas realmente certas customizações as vezes não são tão agradáveis quando os desenvolvedores de apps, programas de computador e páginas de web pensam que será. Por exemplo, usuários de distros baseadas em Linux geralmente costumam customizar bastante visualmente o seu sistema operacional, o que geralmente fica próximo ao gosto deles de uso, incluindo os scrollbars de qualquer programa, então no momento que customizamos uma página web, que ficará diferente do habitual do usuário final, acabamos por "quebrar o ambiente" que o usuário esta acostumado/deseja.
Eu entendo que não é tão comum em Windows a customização das barras de rolagem, talvez na época do Windows98SE e WindowsME tenha sido comum (apesar de mais limitado a cores) e por isso as pessoas acabam por achar tal customização interessante, para quem esta habituado a navegar em diversos sites é apenas algo visualmente bonito, mas para pessoas com menos familiaridade, que podem até se tornar clientes em "um site" talvez fazer esses "miniscrollbars" seja algo que vá complicar muito na experiência do usuário.