Para navegadores webkit
(Chrome, Safari, Opera 15+):
::-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 */ }

Créditos do código acima: CSS Tricks
Para criar um scrollbar exactamente como no da imagem da tua pergunta seria algo deste genero:
::-webkit-scrollbar-track {
background-color: #F4F4F4;
}
::-webkit-scrollbar {
width: 6px;
background: #F4F4F4;
}
::-webkit-scrollbar-thumb {
background: #dad7d7;
}
Eis um exemplo online no jsFiddle: http://jsfiddle.net/nach90sq/
Contudo o código acima não irá funcionar no Internet Explorer, mas para isso podes usar isto:
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;

Créditos do código acima: Codemug
Alternativamente podes sempre pesquisar no Google por jQuery plugins para scrollbars, e irás encontrar plugins como: