Como criar: Barra de rolagem personalizada

Aprenda a criar barras de rolagem personalizadas usando CSS.

Barra de rolagem personalizada

Experimente você mesmo

Experimente você mesmo

Atenção:Firefox ou versões anteriores ao Edge 79 não suportam barra de rolagem personalizada.

Como criar uma barra de rolagem personalizada

Chrome, Edge, Safari e Opera suportam pseudo-elementos não padrão ::-webkit-scrollbar Elemento pseudo que nos permite modificar a aparência da barra de rolagem do navegador.

O exemplo a seguir cria uma barra de rolagem com largura de 10px, com faixa/cores de barra cinza e deslizador cinzento escuro (#888):

/* Largura */
::-webkit-scrollbar {
  width: 10px;
}
/* Faixa */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Deslizador */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Deslizador ao passar o mouse */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Experimente você mesmo

Este exemplo cria uma barra de rolagem com efeito de sombra:

Exemplo

/* Largura */
::-webkit-scrollbar {
  width: 20px;
}
/* Faixa */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px cinza;
  border-radius: 10px;
}
/* Deslizador */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Experimente você mesmo

Seletor de barra de rolagem

Para navegadores webkit, você pode usar os seguintes elementos pseudo para personalizar a barra de rolagem do navegador:

::-webkit-scrollbar A barra de rolagem em si.
::-webkit-scrollbar-button Os botões na barra de rolagem (setas para cima e para baixo).
::-webkit-scrollbar-thumb O deslizador arrastável.
::-webkit-scrollbar-track A faixa da barra de rolagem (barra de progresso).
::-webkit-scrollbar-track-piece A parte da faixa (barra de progresso) não coberta pelo deslizador.
::-webkit-scrollbar-corner O canto inferior da barra de rolagem, onde a barra horizontal e vertical se encontram.
::-webkit-resizer Manopas ajustáveis arrastáveis que aparecem na esquina inferior direita de alguns elementos.