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 */ }
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 */ }
Para criar um scrollbar exatamente como da tua pergunta seria algo deste genero:
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
}
::webkit-scrollbar-thumb {
background: #dad7d7;
}
Conforme o snippet, abra no Navegador Chrome ...
.container {
height:200px;
overflow: auto;
width: 200px;
border-bottom: 1px solid #D4D4D4;
background-color: blue;
}
.container::-webkit-scrollbar-track {
background-color: transparent;
}
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-thumb {
background: #dad7d7;
}
<div class="container">
<div class="content" style="height:600px;">fdsf</div>
</div>