Código Base:
body::-webkit-scrollbar{
width:6px; //largura da barra
}
body::-webkit-scrollbar-track{
background: #000; //cor de fundo
}
body::-webkit-scrollbar-thumb{
background: #474747; //cor da barra
background-clip: padding-box;
}
Alterações:
Caso queira, também é possível deixar a barra de rolagem com uma borda, para causar uma sensação de estar encaixotada.
Para isso, é necessário adicionar um padding, ao srollbar-thumb. Recomendo que aumente também o width da scrollbar para ter um efeito mais interessante.
body::-webkit-scrollbar{
width:10px; //largura da barra
}
body::-webkit-scrollbar-track{
background: #000; //cor de fundo
}
body::-webkit-scrollbar-thumb{
background: #474747; //cor da barra
padding: 2px; //padding para criar uma "borda"
background-clip: padding-box;
}
Observação:
Estes códigos apenas se aplicam para a barra de rolagem principal da página.
Caso queira aplicar o mesmo estilo para todas as barras de possíveis componentes dentro da página, basta retirar a referência “body” do código.
::-webkit-scrollbar{
width:6px; //largura da barra
}
::-webkit-scrollbar-track{
background: #000; //cor de fundo
}
::-webkit-scrollbar-thumb{
background: #474747; //cor da barra
background-clip: padding-box;
}
