Barra de desplazamiento CSS personalizada para Firefox

Quiero personalizar una barra de desplazamiento con CSS.

Uso este código CSS de WebKit, que funciona bien para Safari y Chrome:

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

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

¿Cómo puedo hacer lo mismo en Firefox?

Sé que puedo hacerlo fácilmente usando jQuery, pero preferiría hacerlo con CSS puro si es factible.

Agradecería el consejo de algún experto.

Community
Pregunta editada 12º julio 2018 в 12:00
Programación
firefox css webkit scrollbar
29º mayo 2011 в 1:44
19 vistas
Solución

Desde finales de 2018, ¡ahora hay una personalización limitada disponible en Firefox!

Consulta estas respuestas:

Y esto para información de fondo: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

No hay equivalente en Firefox a ::-webkit-scrollbar y amigos.

Tendrás que seguir con JavaScript.

A mucha gente le gustaría esta característica, véase: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

En cuanto a los reemplazos de JavaScript, puedes probar:

thirtydot
Respuesta editada 9º enero 2019 в 4:56
Comentarios (17)

Pensé en compartir mis hallazgos en caso de que alguien esté considerando un plugin de JQuery para hacer el trabajo.

Le di a JQuery Custom Scrollbar una oportunidad. Es bastante elegante y hace un desplazamiento suave (con inercia de desplazamiento) y tiene un montón de parámetros que se pueden ajustar, pero terminó siendo un poco demasiado intensivo de la CPU para mí (y añade una buena cantidad al DOM).

Ahora estoy probando Perfect Scrollbar. Es simple y ligero (6KB) y hasta ahora hace un buen trabajo. No requiere un uso intensivo de la CPU (por lo que puedo decir) y añade muy poco a su DOM. Sólo tiene un par de parámetros que ajustar (wheelSpeed y wheelPropagation), pero es todo lo que necesito y maneja muy bien las actualizaciones del contenido que se desplaza (como la carga de imágenes).

P.D. He echado un vistazo a JScrollPane, pero @simone tiene razón, ya está un poco anticuado y es un engorro.

Matthew
Respuesta editada 30º octubre 2017 в 6:21
Comentarios (4)

Funciona en el estilo de usuario, y parece que no funciona en las páginas web. No he encontrado una dirección oficial de Mozilla sobre esto. Aunque puede haber funcionado en algún momento, Firefox no tiene soporte oficial para esto. Este error sigue abierto https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

consulte http://codemug.com/html/custom-scrollbars-using-css/ para más detalles.

Adrian Rodriguez
Respuesta editada 29º mayo 2014 в 8:41
Comentarios (5)