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 experto de alguien!

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

Ver estas respuestas:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

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

No hay equivalente de Firefox ::-webkit-scrollbary amigos.

Tendrás que seguir con JavaScript.

A mucha gente le gustaría esta función, consulte: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

En cuanto a los reemplazos de JavaScript, puede intentar:

• https://github.com/mdbootstrap/perfect-scrollbar
• https://github.com/Grsmto/simplebar
• https://github.com/vitch/jScrollPane

Firefox 64 agrega soporte para el borrador de especificación CSS Scrollbars Module Level 1 , que agrega dos nuevas propiedades de scrollbar-widthy scrollbar-colorque dan cierto control sobre cómo se muestran las barras de desplazamiento.

Puede establecer scrollbar-coloruno de los siguientes valores (descripciones de MDN):

• auto Representación de plataforma predeterminada para la parte de seguimiento de la barra de desplazamiento, en ausencia de otras propiedades de color de la barra de desplazamiento relacionadas.
• dark Muestre una barra de desplazamiento oscura, que puede ser una variante oscura de la barra de desplazamiento proporcionada por la plataforma o una barra de desplazamiento personalizada con colores oscuros.
• light Muestre una barra de desplazamiento clara, que puede ser una variante ligera de la barra de desplazamiento proporcionada por la plataforma o una barra de desplazamiento personalizada con colores claros.
• <color> <color> Aplica el primer color al pulgar de la barra de desplazamiento, el segundo a la pista de la barra de desplazamiento.

Tenga en cuenta que darky los lightvalores no se implementan actualmente en Firefox .

notas de macOS:

Las barras de desplazamiento semitransparentes de ocultación automática que son las predeterminadas de macOS no se pueden colorear con esta regla (todavía eligen su propio color de contraste basado en el fondo). Solo las barras de desplazamiento que se muestran permanentemente (Preferencias del sistema> Mostrar barras de desplazamiento> Siempre) están coloreadas.

Demostración visual:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

Puede establecer scrollbar-widthuno de los siguientes valores (descripciones de MDN):

• auto El ancho de barra de desplazamiento predeterminado para la plataforma.
• thin Una variante de ancho de barra de desplazamiento delgada en plataformas que proporcionan esa opción, o una barra de desplazamiento más delgada que el ancho de barra de desplazamiento de plataforma predeterminado.
• none No se muestra la barra de desplazamiento, sin embargo, el elemento seguirá siendo desplazable.

También puede establecer un valor de longitud específico, de acuerdo con la especificación. Ambos thiny una longitud específica pueden no hacer nada en todas las plataformas, y lo que hace exactamente es específico de la plataforma. En particular, Firefox no parece admitir actualmente un valor de longitud específico ( este comentario en su rastreador de errores parece confirmar esto ). Sin thinembargo, el trabajo de teclado parece estar bien soportado, con macOS y Windows al menos.

Probablemente valga la pena señalar que la opción de valor de longitud y toda la scrollbar-widthpropiedad se están considerando para su eliminación en un borrador futuro, y si eso sucede, esta propiedad en particular puede eliminarse de Firefox en una versión futura.

Demostración visual:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

¿Puedo ofrecer una alternativa?

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

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

Para una demostración y una explicación un poco más detallada, consulte aquí ...

jsfiddle.net/aj7bxtjz/1/

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

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

Ahora estoy probando Perfect Scrollbar . Es simple y liviano (6 KB) y hasta ahora está haciendo un trabajo decente. No es intensivo en CPU (por lo que puedo decir) y agrega muy poco a su DOM. Solo tiene un par de parámetros para ajustar (wheelSpeed ​​y wheelPropagation), pero es todo lo que necesito y maneja las actualizaciones del contenido de desplazamiento muy bien (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.

Desde Firefox 64 , es posible utilizar nuevas especificaciones para un estilo de barra de desplazamiento simple ( no tan completo como en Chrome con prefijos de proveedor ).

En este ejemplo, es posible ver una solución que combina diferentes reglas para abordar Firefox y Chrome con un resultado final similar (no igual) (por ejemplo, use sus reglas originales de Chrome):

Las reglas clave son:

Para Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Para cromo

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

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

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

Tenga en cuenta que con respecto a su solución, es posible utilizar también reglas de Chrome más simples como las siguientes:

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

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

Finalmente, para ocultar las flechas en las barras de desplazamiento también en Firefox, actualmente es necesario configurarlo como " delgado " con la siguiente reglascrollbar-width: thin;

Año 2020 esto funciona

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

Funciona en estilo de usuario, y parece que no funciona 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;
}

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

@-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;
    }
}