Como fazer - Barra de rolagem personalizada
Saiba como criar uma barra de rolagem personalizada com CSS.
Barras de rolagem personalizadas
Observação: as barras de rolagem personalizadas não são suportadas no Firefox ou no Edge, versão anterior 79.
Como criar barras de rolagem personalizadas
Chrome, Edge, Safari e Opera suportam o ::-webkit-scrollbar
pseudo elemento não padrão, que nos permite modificar a aparência da barra de rolagem do navegador.
O exemplo a seguir cria uma barra de rolagem fina (10px de largura), que tem uma faixa/barra cinza e uma alça cinza escuro (#888):
Exemplo
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Este exemplo cria uma barra de rolagem com sombra de caixa:
Exemplo
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Seletores da barra de rolagem
Para navegadores webkit, você pode usar os seguintes pseudo elementos para personalizar a barra de rolagem do navegador:
::-webkit-scrollbar
a barra de rolagem.::-webkit-scrollbar-button
os botões na barra de rolagem (setas apontando para cima e para baixo).::-webkit-scrollbar-thumb
a alça de rolagem arrastável.::-webkit-scrollbar-track
a faixa (barra de progresso) da barra de rolagem.::-webkit-scrollbar-track-piece
a trilha (barra de progresso) NÃO coberta pela alça.::-webkit-scrollbar-corner
no canto inferior da barra de rolagem, onde as barras de rolagem horizontal e vertical se encontram.::-webkit-resizer
a alça de redimensionamento arrastável que aparece no canto inferior de alguns elementos.