Barra de desplazamiento CSS personalizada para Firefox

Quiero personalizar una barra de desplazamiento con CSS.

Utilizo 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.

Estaría agradecido por el consejo de expertos de alguien!

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

Tendrás que quedarte con JavaScript.

A muchas personas les gustaría esta característica, consulte: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Este informe está pidiendo exactamente lo mismo que está solicitando: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Se cerró como un duplicado del primer informe al que me vinculé.


En cuanto a los reemplazos de JavaScript, puedes probar:

¿Puedo ofrecer una alternativa?

Sin secuencias de comandos, solo estilos de CSS estandarizados y un poco de creatividad. Respuesta corta: enmascara partes de la barra de desplazamiento del navegador existente, lo que significa que conservas toda su funcionalidad.

 .scroll_content { position: relative; width: 400px; height: 414px; top: -17px; padding: 20px 10px 20px 10px; overflow-y: auto; } 

Para la demostración y un poco más de explicación en profundidad, consulte aquí …

jsfiddle.net/aj7bxtjz/1/

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

Le di una oportunidad a JQuery Custom Scrollbar . Es bastante elegante y realiza un desplazamiento suave (con inercia de desplazamiento) y tiene muchos parámetros que puedes ajustar, pero terminó siendo un poco demasiado intensivo para mí (y agrega una cantidad justa al DOM).

Ahora le doy a Perfect Scrollbar una oportunidad. Es simple y liviano (6KB) y está haciendo un trabajo decente hasta ahora. No consume mucho CPU (hasta donde puedo decir) y agrega muy poco a tu DOM. Solo tiene que ajustar un par de parámetros (wheelSpeed ​​y wheelPropagation), pero es todo lo que necesito y maneja muy bien las actualizaciones del contenido de desplazamiento (como cargar imágenes).

PD. He echado un vistazo rápido a JScrollPane, pero @simone tiene razón, ahora está un poco anticuado y es un PITA.

2018 Las barras de desplazamiento de Firefox aún se ven tan mal como 1992, es un PITA, pero ahora podemos usar filtros css en ellas.

Aquí hay un ejemplo con un tinte homónimo compatible con el navegador cruzado verdoso en la parte superior.

Usa sabiamente

 div { max-height: 200px; max-width: 80%; overflow-x: hidden; overflow-y: scroll; filter: sepia(100%) saturate(360%) grayscale(0) contrast(140%) hue-rotate(56deg) invert(16%) } 
 
 @-moz-document url-prefix(http://),url-prefix(https://) { scrollbar { -moz-appearance: none !important; background: rgb(0,255,0) !important; } thumb,scrollbarbutton { -moz-appearance: none !important; background-color: rgb(0,0,255) !important; } thumb:hover,scrollbarbutton:hover { -moz-appearance: none !important; background-color: rgb(255,0,0) !important; } scrollbarbutton { display: none !important; } scrollbar[orient="vertical"] { min-width: 15px !important; } } 

Funciona en estilo de usuario, y parece no funcionar en páginas web. No he encontrado la dirección oficial de Mozilla sobre esto. Si bien puede haber funcionado en algún momento, Firefox no tiene soporte oficial para esto. Este error aún está 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; } 

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