Como estilizar uma scrollbar usando CSS

A scrollbar ou barra de rolagem facilita a visualização do usuário, entretanto pode interferir no design do seu site. Para que isso não ocorra podemos aderir a estilização por meio do CSS.

Como adicionar a scrollbar?

Para adicioná-la na vertical e horizontal podemos utilizar: 

.classe {overflow:scroll}

Para aparecer só na vertical ou só na horizontal, respectivamente temos:

.classe {overflow-y:scroll}

.classe {overflow-x:scroll}

Ainda podemos adicionar uma altura que determine se o scroll aparecerá ou não. Por exemplo, se a altura definida for de 300px, o scroll só funcionará a partir de 301px.

Estilizando a scrollbar

A barra de rolagem possui classes que podem torná-la formatável. Para uma scrollbar comum podemos utilizar estilos simples, mas que já fazem total diferença.

Utilizando o CSS abaixo podemos resolver o problema:

.classe::-webkit-scrollbar-track{
	/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	border-radius:0;
	background-color: #D0D4CE;
}

.classe::-webkit-scrollbar{
	width: 6px;
	background-color: #D0D4CE;
}

.classe::-webkit-scrollbar-thumb{
	border-radius:0;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #71806B;
}

Este CSS corresponde a Scrollbar representada abaixo:

Onde: 

.classe se refere a classe onde a scrollbar está. No print acima, seria a classe da div branca, a div mãe do conteúdo.

-webkit-scrollbar-track  a alça fixa da scrollbar

-webkit-scrollbar  refere-se a scrollbar inteira

-webkit-scrollbar-thumb  é a alça de rolagem móvel

Outras classes

Observe que, no print a scrollbar é simples, porém a formatação do CSS é versátil e útil. Além disso, existem outras classes que também podem ser úteis:

::-webkit-scrollbar-button se refere as setas da scrollbar comum

::-webkit-scrollbar-track-piece é a parte da alça fixa que não é coberta pela alça móvel

::-webkit-scrollbar-corner canto inferior onde as barras de rolagem y e x se encontram

::-webkit-resizer redimensionamento da box que aparece no canto inferior

Todas essas classes podem ser usadas em conjunto, de maneira que sua barra de rolagem seja completamente formatável.

Gostou das dicas do post? Acompanhe nosso blog para não perder mais desse conteúdo, além de ter acesso a muito mais.