Como personalizar a barra de rolagem

01- Coloque esse código no seu CSS:

html::-webkit-scrollbar {width:22; height:auto;background: #FFF;}
html::-webkit-scrollbar-corner { background: #FFF;}
html::-webkit-scrollbar-button:vertical {height:1px;display:block;}
html::-webkit-scrollbar-button:horizontal {width:1px;display:block;}
html::-webkit-scrollbar-thumb:vertical {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid  #A2A2A2;border-right:none;-webkit-border-radius: 8px;}
html::-webkit-scrollbar-thumb:horizontal {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid #A2A2A2;border-bottom;}
html::-webkit-scrollbar-thumb  {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);}
html::-webkit-scrollbar-thumb:hover {background-image: url(LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM);border: 1px solid  #A2A2A2;}
html::-webkit-scrollbar-track-piece {background: none;}
html::-webkit-scrollbar:vertical {border-left: 1px solid #A2A2A2;}
html::-webkit-scrollbar:horizontal {border-top: 1px solid #A2A2A2;}

Lembre-se de mudar aonde tem escrito: LINK DA IMAGEM PARA O BOTÃO DE ROLAGEM, para o link da imagem da barrinha. Se vocês olharem na seção de backgrounds vão achar varias imagens lindas para a barrinha.