estilo - scrollbar css generator

Aplicar estilo de barra de desplazamiento webkit al elemento especificado

Question

Soy nuevo en los pseudo-elementos que tienen el prefijo doble de dos puntos. 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 personalizar la barra de desplazamiento del div, pero la barra de desplazamiento de la ventana principal permanece en el valor predeterminado.

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

Answer 1

Quiero usar un selector de clase para usar una barra de desplazamiento personalizada.

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

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

Answer 2

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/

Answer 3

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

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