Cómo cambiar el color de la barra de desplazamiento usando css [duplicar]

Esta pregunta ya tiene una respuesta aquí:

Mi jsfiddle está aquí
Estoy tratando de cambiar el color de la barra de desplazamiento, pero aquí no está funcionando.

Css: 

.flexcroll {     
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}​
 31
csscss3
Author: Suresh Pattu, 2012-09-06
Source

2 answers

Puede usar los siguientes atributos para webkit, que llegan al shadow DOM : 

::-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 */ }

Aquí hay un violín de trabajo con una barra de desplazamiento roja, basado en el código de esta página explicando los problemas.

Http://jsfiddle.net/hmartiro/Xck2A/1 /

Usando esto y su solución, puede manejar todos los navegadores excepto Firefox, que en este punto creo que todavía requiere una solución javascript.

 36
Author: hayk.mart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-06 05:16:17

Su css solo funcionará en el navegador IE. Y el css suggested por hayk.mart funcionará en navegadores webkit. Y mediante el uso de diferentes hacks CSS no puede estilizar las barras de desplazamiento de sus navegadores con el mismo resultado.

Por lo tanto, es mejor usar un complemento jQuery/Javascript para lograr una solución de navegador cruzado con el mismo resultado.

Solución:

Usando JScrollPane un plugin de jQuery, puede lograr una solución de navegador cruzado

Ver Esta Demo

 16
Author: Ahsan Khurshid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-07 04:12:05