[CSS] Scrollbar personalizado

[Guest Rezendes]

Olá, eu to aqui pra mostrar que se pode personalizar a barra de rolagem sem que funcione apenas no Internet Explorer (IE), como mostrado nesse tópico aqui: (http://gamersboard.com.br/topic/1166-barra-de-rolagem-colorida/)

 

Basta adicionar o css ao seu site:

/* ESSE É O SCROLL, SEM COR, SÓ COM A LARGURA */

::-webkit-scrollbar {



    height: 0;



    overflow: visible;



    width: 10px;



}



/* ESSE É O SCROLL NORMAL, PODE SER DEFINIDO A COR, BORDAR, ETC */

::-webkit-scrollbar-thumb {



    background-color: #666; 



    min-height: 28px;



    padding: 100px 0 0;



    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);



    border-width: 1px 1px 1px 6px;



}



/* AQUI É A COR QUANDO PASSA O MOUSE EM CIMA DO SCROLL */

::-webkit-scrollbar-thumb:hover {



    background-color: #777; 



}

/* AQUI É A COR DO SCROLL QUANDO ESTÁ COM O MAUSE CLICADO NELE */

::-webkit-scrollbar-thumb:active {



    background-color: #888; 



}



::-webkit-scrollbar-button {



    height: 0;



    width: 0;



}



::-webkit-scrollbar-track {



    background-clip: padding-box;



    border: solid transparent;



    border-width: 0 0 0 4px;



}

Preview: 

http://www.killergames.com.br/

http://jairocraft.com.br/

 

Creditos: Eu

Editado Janeiro 12, 2016 por Rezende

[Buuu]

Dale Rezendão o/

[nathampa0909]

http://www.jairocraft.com.br *

 

MERDA REVIVI SEM PERCEBER DESCULPEM

Editado Janeiro 8, 2016 por nathampa0909