Barra de desplazamiento CSS personalizada para Firefox

Puedo ofrecer una alternativa?

Nada de scripting, 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, marque 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 a jQuery Custom Scrollbar una oportunidad. Es bastante elegante y hace un poco de desplazamiento suave (con inercia de desplazamiento) y tiene un montón de parámetros que puede ajustar, pero terminó siendo un poco demasiado intensivo de CPU para mí (y agrega una buena cantidad al DOM).

Ahora estoy dando Barra de desplazamiento perfecta una oportunidad. Es simple y ligero (6KB) y está haciendo un trabajo decente por lo que lejos. No es intensivo de CPU en absoluto (por lo que puedo decir) y añade 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).

P.D. Tuve un vistazo rápido a JScrollPane, pero @simone tiene razón, es un poco anticuado ahora y un PITA.

2018 Firefox scrollbars todavía se ve tan mal como 1992, es un PITA, pero ahora podemos usar filtros css en ellos.

Aquí hay un ejemplo con un tinte hommous compatible con navegador cruzado verdoso en la parte superior.

Use 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%)

}

<div>

<ul>
<li><a href="/wiki/Chapati" title="Chapati">Chapati</a>, unleavened flatbread from the <a href="/wiki/Indian_subcontinent" title="Indian subcontinent">Indian subcontinent</a></li>
<li><a href="/wiki/Wheat_tortilla" title="Wheat tortilla">Flour tortilla</a>, a thin unleavened flatbread from <a href="/wiki/Mexico" title="Mexico">Mexico</a></li>
<li><a href="/wiki/Focaccia" title="Focaccia">Focaccia</a>, a flat oven-baked bread from <a href="/wiki/Italy" title="Italy">Italy</a></li>
<li><a href="/wiki/Injera" title="Injera">Injera</a>, a sourdough-risen flatbread from <a href="/wiki/East_Africa" title="East Africa">East Africa</a></li>
<li><a href="/wiki/Khachapuri" title="Khachapuri">Khachapuri</a>, a breaded cheese dish from <a href="/wiki/Georgia_(country)" title="Georgia (country)">Georgia</a></li>
<li><a href="/wiki/Khubz" title="Khubz">Khubz</a>, a round bread from the <a href="/wiki/Arabian_Peninsula" title="Arabian Peninsula">Arabian Peninsula</a></li>
<li><a href="/wiki/Matnakash" title="Matnakash">Matnakash</a>, a leavened bread from <a href="/wiki/Armenia" title="Armenia">Armenia</a> (related to the <a href="/wiki/Ramadan_pita" class="mw-redirect" title="Ramadan pita">Ramadan pita</a>)</li>
<li><a href="/wiki/Naan" title="Naan">Naan</a>, a leavened, oven-baked flatbread from <a href="/wiki/Central_Asian_cuisine" class="mw-redirect" title="Central Asian cuisine">Central</a> and <a href="/wiki/South_Asian_cuisine" title="South Asian cuisine">South Asia</a></li>
<li><a href="/wiki/Pit%C4%83_de_Pecica" title="Pită de Pecica">Pită de Pecica</a>, a round bread from <a href="/wiki/Romania" title="Romania">Romania</a></li>
<li><a href="/wiki/Rghaif" class="mw-redirect" title="Rghaif">Rghaif</a>, a pancake-like bread from <a href="/wiki/Maghreb" title="Maghreb">Northwest Africa</a></li>
</ul>

</div>

@-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 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 todavía 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;
}

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