Diseña la barra de desplazamiento con CSS en Google Chrome (-webkit)

Question

¿Alguien puede ayudarme? Quiero hacer un estilo simple para la barra de desplazamiento. Encontré información en Internet y la probé, pero parece que realmente no funciona por alguna razón. La barra de desplazamiento se ve bien al actualizar la página, pero tan pronto como toca la barra de desplazamiento se vuelve loco. Llena de muchos colores y no puedes entender que es una barra de desplazamiento.

aquí cómo se ve antes de tocarlo - http://i40.tinypic.com/a2evro.png

aquí cómo se ve después de lo tocas - http://i44.tinypic.com/qzkirn.png

Este es el código que puse en css:

::-webkit-scrollbar { 
width: 16px; 
height: 16px; } 

::-webkit-scrollbar-thumb { 
background-color: rgba(0, 0, 0, 0.2); 
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); } 

Gracias tú todo. Aclamaciones. Alex

Answer 1

Here is an example that works:

::-webkit-scrollbar { 
    height: 12px; 
    width: 12px; 
    background: #000; 
} 

::-webkit-scrollbar-thumb { 
    background: #393812; 
    -webkit-border-radius: 1ex; 
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); 
} 

::-webkit-scrollbar-corner { 
    background: #000; 
} 

O puede utilizar jScrollPane.