Customizando a barra de Scroll só com CSS

Uma poderosa ferramenta para os desenvolvedores foi implementada nas versões anteriores do webkit mas ainda é pouco utilizada em geral. Trata-se de customizar a barra de Scroll usando somente CSS, ou seja, sem a necessidade de Javascript. E para isso, é necessário o uso de pseudo elementos do CSS3.

Parece complicado mas na verdade é bem simples. O exemplo abaixo mostra em código que no caso, personalizaria um box de histórico por exemplo.

#historico{ height:300px; overflow:scroll; } /* limitando altura do box */
#historico::-webkit-scrollbar { width:10px; background:#e3e0d6; } /* configurando scroll */
#historico::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
#historico::-webkit-scrollbar-thumb { border-radius:10px; background:#8b8778;  }

O site CSS Tricks explica detalhadamente pra que serve cada pseudo-classe:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Agora veja o que cada pseudo classe controla.

Pseudo Classes pra customizar Scroll Bar

O Chrome e o Safari dão suporte a feature enquanto os outros navegadores irão ver do jeito normal, como sempre viram. Pra quem quiser fazer a funcionalidade cross-browser, existem dezenas de plugins em jQuery que fazem isso embora o mais usado seja o jScrollPane. Mas nesse caso, deixa de ser nativo do browser, e o JavaScript passa a emular o funcionamento do scroll.

This entry was posted in CSS by Danilo. Bookmark the permalink.

About Danilo

Danilo é desenvolvedor front end e back end. Gosta de tênis, de acompanhar o Corinthians e de jogar futebol de videogame (no futebol de verdade ele é muito ruim).

Leave a Reply

Your email address will not be published. Required fields are marked *