css - personalizada - webkit appearance select

Barra de desplazamiento CSS personalizada para Firefox

Question

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

Answer 1

¿Puedo ofrecer una alternativa?

Sin scripts, solo estilos css estandarizados y un poco de creatividad. Respuesta corta: enmascara 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 un poco más de explicación en profundidad, consulte aquí ...

jsfiddle.net/aj7bxtjz/1/

Answer 2

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

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

Answer 3

No hay un equivalente de Firefox para ::-webkit-scrollbar y 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

Este informe solicita exactamente lo mismo que solicita: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

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

En cuanto a los reemplazos de JavaScript, puedes probar:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (pero está desactualizado y aparentemente es un PITA ...)

Answer 4

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

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

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

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

Answer 5

Las barras de desplazamiento de Firefox 2018 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 hommous compatible con el 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>

Answer 6

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