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

May 29 '11 08:05 Dimitri Vorontzov

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

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

• autoRepresentación de plataforma predeterminada para la parte de pista de la barra de desplazamiento, en ausencia de otras propiedades de color de la barra de desplazamiento relacionadas.
• <color> <color>Aplica el primer color al pulgar de la barra de desplazamiento y el segundo a la pista de la barra de desplazamiento.

Anteriormente, la especificación incluía darkvalores lightque no se implementaron en Firefox . Desde entonces, estos valores se han eliminado de la especificación.

En Android estándar con Firefox móvil, el pulgar se puede colorear, pero no hay pista para colorear.

Además, en la versión de macOS Firefox anterior a la 99.0, estas reglas no podían aplicar estilos a las barras de desplazamiento semitransparentes que se ocultan automáticamente y que son predeterminadas en macOS. A partir de Firefox 99.0, todos los modos de barra de desplazamiento de macOS (configurados en Preferencias del Sistema > Mostrar barras de desplazamiento) se pueden colorear.

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-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-colors">
  <p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

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

• autoEl ancho de la barra de desplazamiento predeterminado para la plataforma.
• thinUna variante de ancho de barra de desplazamiento delgada en plataformas que brindan esa opción, o una barra de desplazamiento más delgada que el ancho de barra de desplazamiento predeterminado de la plataforma.
• noneNo se muestra ninguna barra de desplazamiento; sin embargo, el elemento seguirá siendo desplazable.

También puede establecer un valor de longitud específico, según las especificaciones. Es posible que ambos thiny una longitud específica no hagan nada en todas las plataformas, y lo que hacen 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 embargo, el thintrabajo de teclas parece tener buen soporte, al menos con compatibilidad con macOS y Windows.

En Android estándar con Firefox móvil, el autoancho del pulgar ya es bastante delgado y thinno lo hace más delgado.

Probablemente valga la pena señalar que scrollbar-widthse está considerando eliminar la opción de valor de longitud y toda la propiedad 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>

Jan 08 '2019 23:01 Alexander O'Mara

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 proveedores ).

En este ejemplo es posible ver una solución que combina diferentes reglas para abordar tanto Firefox como 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, también es posible utilizar 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 configurarlas como " delgadas " con la siguiente reglascrollbar-width: thin;

Dec 12 '2018 08:12 Luca Detomi