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.
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.