Como personalizar a barra de rolagem

Você já deve ter visto em alguns sites ou blogs, barras de rolagens personalizadas, ou seja, estão diferentes das barras de rolagem padrão. Personalizar a barra de rolagem não é difícil de fazer, nesse artigo você vai aprender como fazer isso de maneira simples e direta.

A barra de rolagem

Antes de demonstrar como personalizar a barra de rolagem, é importante que você entenda quais são as partes que uma barra de rolagem possui. A seguir uma imagem ilustrativa das partes de uma barra de rolagem:

Conhecendo as partes de uma barra de rolagem, agora você pode personaliza-la ao seu gosto. Para isso vamos utilizar os seguintes pseudo elementos CSS:


::-webkit-scrollbar {
}
::-webkit-scrollbar-button {
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-track-piece {
}
::-webkit-scrollbar-corner {
}
::-webkit-resizer {
}

OBS: somente navegadores baseados em Webkit suportam esses elementos, ou seja, navegadores como Chrome, Edge, Opera, Safari, navegadores iOS, entre outros.

Exemplo de personalização

HTML

Vamos utilizar para o nosso exemplo o HTML a seguir:


<main>
    <section class="content">
        <h1>Titulo da página</h1>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic 
            typesetting, remaining essentially unchanged
        </p>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic 
            typesetting, remaining essentially unchanged
        </p>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic 
            typesetting, remaining essentially unchanged
        </p>


        <form action="" method="POST" class="form-comment">
            <textarea name="comment" cols="50" rows="10"></textarea>
        </form>
    </section>
</main>

CSS

Primeiramente vamos definir larguras e alturas para os nossos containers, somente para fim didático:


main {
    width: 500px;
    height: 500px;
    overflow: auto;
    background-color: #EEEEEE;
}
.content {
    width: 800px;
    height: 800px;
}

Agora sim vamos personalizar nossa barra de rolagem com o código a seguir:


main::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #CCCCCC;
}
main::-webkit-scrollbar-button {
    border: 1px #FF0000 dashed;
}
main::-webkit-scrollbar-track {
    background: #CCCCCC;
}
main::-webkit-scrollbar-track-piece {
    background: #CCCCCC;
}
main::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 5px;
}
main::-webkit-scrollbar-corner {
    background: #FF0000;
    border-radius: 5px;
}
.form-comment textarea::-webkit-resizer {
    border: 1px #FF0000 dashed;
}

O resultado ficará como a imagem a seguir:

Resultado final das barras de rogalgem personalizadas

Conclusão

Com pouco código CSS conseguimos personalizar a barra de rolagem, agora fica no gosto de cada um personalizar do jeito que achar melhor ou conforme a sua necessidade.
Vou deixar um link do exemplo com o código completo para demonstração e download.

Demonstração

Download