Aplicar el estilo de la barra de desplazamiento de webkit al elemento especificado

Question

Soy nuevo en los pseudo-elementos que tienen el prefijo doble. Me encontré con un artículo de blog sobre el diseño de barras de desplazamiento usando algunos CSS de webkit. ¿Se puede aplicar el pseudo-elemento CSS a elementos individuales?

/* This works by applying style to all scroll bars in window */ 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* This does not apply the scrollbar to anything */ 
div ::-webkit-scrollbar { 
    width: 12px; 
} 

En este violín, me gustaría hacer barra de desplazamiento de la div personalizarse, pero estancia barra de desplazamiento de la ventana principal en el valor predeterminado.

http://jsfiddle.net/mrtsherman/4xMUB/1/

Answer 1

Su idea era correcta. Sin embargo, la notación div ::-webkit-scrollbar con un espacio después de div es en realidad la misma que div *::-webkit-scrollbar; este selector significa "barra de desplazamiento de cualquier elemento dentro de <div>". Use div::-webkit-scrollbar.

Ver demostración en http://jsfiddle.net/4xMUB/2/

Answer 2

Quiero usar un selector de clase para el uso de una barra de desplazamiento personalizado.

De alguna manera .foo::-webkit no funciona, pero me di cuenta de que div.foo::-webkit funciona! Los ## * ## $$ pseudo-cosas ....

Ver http://jsfiddle.net/QcqBM/16/

Answer 3

También puede aplicar estas reglas por id del elemento. Digamos que la barra de desplazamiento de un div tiene que tener un estilo que tenga un id "myDivId". Entonces puedes hacer lo siguiente. De esta forma puede usar diferentes estilos para barras de desplazamiento de diferentes elementos.

#myDivId::-webkit-scrollbar { 
    width: 12px; 
} 

#myDivId::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

#myDivId::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

http://jsfiddle.net/QcqBM/516/