La Aclaracion dijo:EL sufijo o propiedad webkit es el responsable de la nueva personaliizacion en CSS3 de los scrollbars , lo hace solo compatible con Google Chrome y Safari /Derivado obvio chromium
Existen Propiedades en CSS para IE (Internet Explorer) como scrollbar-base-color que permiten personalizar la barra de desplazamiento o scrollbar totalmente para el body pero solo fue para la version 5.5 y IE dejo eso.
En estos dias la personalizacion del scrollbar esta devuelta, pero es hora de Webkit. Es un poco mejor ahora ya que estan prefijadas para webkit y usan el shadow-DOM , esto ha sido hace un par de años, David Hyatt lo bloggeo y puso junto unos ejemplos de las combinaciones posibles que se podrian hacer:
Lo Bueno
Las Diferentes Piezas
Estos son los mismos pseudo-elementos. Las partes que componen verdaderamente al scrollbar
::-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 */ }
Los Diferentes Estados
Estos son las clases de los pseudo selectores. Ellos permiten una seleccion mas especifica de las partes del scrollbar, como cuando el scrollbar se encuentra en diferentes estados
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
Voy a robar la siguiente parte del Blog de David sobre el webkit scrollbar por que lo explica muy bien
:horizontal – La pseudo-clase horizontal aplica a cualquier parte del scrollbar con orientacion horizontal
:vertical – La pseudo-clase vertical aplica a cualquier parte del scrollbar con orientacion vertical
para mas leanlo en el
blog de el capo David
. tuve dificultades con la traduccion 
Todo Junto Ahora
Los pseudo elemento y pseudo selectores trabajan juntos. Aqui unos ejemplos aleatorios
::-webkit-scrollbar-track-piece:start {
/* Selecciona la mitad del scroll individualmente */
}
::-webkit-scrollbar-thumb:window-inactive {
/*Selecciona la barra de desplazamiento cuando no se esta enfocado (focus) el navegador*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*Selecciona la parte baja del scroll cuando esta siendo pasado el mouse (hover)*/
}
Simple Ejemplo
Para hacer realmente simple la personalizacion de un scrollbar podriamos hacer esto
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Tendremos de resultado algo asi:
Ejemplos reales
Miren este sutil y lindo ejemplo del scrollbar personalizado
Maxvoltar
Lo particularmente agradable de este ejemplo es que el scrollbar aplica a todo el body de la pagina, sin embargo aplica a toda la web y no atasta el efecto en las esquinas con scrollbars por default, simplemente se omiten. Intente ver y copiar este ejemplo en un demo para ver como quedaba:
Ver Demo
En Forrst tambien se aplican efectos con scrollbars solo que aqui es en la parte de los scripts y hacen el efecto lo mas sencillo posible haciendo poca diferencia para los que no tienen navegadores con webkit