Barra de rolagem CSS personalizada para Firefox

Eu quero personalizar uma barra de rolagem com CSS.

Eu uso esse código CSS do WebKit, que funciona bem para o Safari e o Chrome:

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

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

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

Como posso fazer a mesma coisa no Firefox?

Eu sei que posso fazê-lo facilmente usando jQuery, mas eu preferiria fazê-lo com CSS puro, se possível.

Ficaria grato pelo conselho de alguém!

A partir do final de 2018, agora existe uma personalização limitada disponível no Firefox!

Veja estas respostas:

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

E isso para obter informações básicas: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

Não há Firefox equivalente a ::-webkit-scrollbare amigos.

Você terá que ficar com o JavaScript.

Muitas pessoas gostariam desse recurso, consulte: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

No que diz respeito às substituições de JavaScript, você pode tentar:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (mas está desatualizado e aparentemente é um PITA ...)

O Firefox 64 adiciona suporte ao rascunho de especificação CSS Scrollbars Module Level 1 , que adiciona duas novas propriedades de scrollbar-widthe scrollbar-colorque dão algum controle sobre como as barras de rolagem são exibidas.

Você pode definir scrollbar-colorum dos seguintes valores (descrições do MDN):

• auto Renderização de plataforma padrão para a parte da faixa da barra de rolagem, na ausência de outras propriedades de cores relacionadas à barra de rolagem.
• dark Mostrar uma barra de rolagem escura, que pode ser uma variante escura da barra de rolagem fornecida pela plataforma ou uma barra de rolagem personalizada com cores escuras.
• light Mostre uma barra de rolagem leve, que pode ser uma variante leve da barra de rolagem fornecida pela plataforma ou uma barra de rolagem personalizada com cores claras.
• <color> <color> Aplica a primeira cor ao polegar da barra de rolagem e a segunda à faixa da barra de rolagem.

Observe que os valores darke não estão atualmente implementados no Firefox .light

notas do macOS:

As barras de rolagem semi-transparentes que ocultam automaticamente e que são o padrão do macOS não podem ser coloridas com esta regra (elas ainda escolhem sua própria cor contrastante com base no plano de fundo). Somente as barras de rolagem permanentemente exibidas (Preferências do sistema> Mostrar barras de rolagem> Sempre) são coloridas.

Demonstração 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>

Você pode definir scrollbar-widthum dos seguintes valores (descrições do MDN):

• auto A largura da barra de rolagem padrão para a plataforma.
• thin Uma variante fina da largura da barra de rolagem nas plataformas que fornecem essa opção ou uma barra de rolagem mais fina que a largura da barra de rolagem padrão da plataforma.
• none Nenhuma barra de rolagem é exibida; no entanto, o elemento ainda pode ser rolado.

Você também pode definir um valor de comprimento específico, de acordo com as especificações. Tanto o thincomprimento quanto o comprimento específico podem não fazer nada em todas as plataformas, e o que exatamente ele faz é específico da plataforma. Em particular, o Firefox atualmente não parece oferecer suporte a um valor específico de comprimento ( esse comentário no rastreador de erros parece confirmar isso ). No thinentanto, o trabalho com as teclas parece ser bem suportado, com pelo menos suporte para macOS e Windows.

Provavelmente, vale a pena notar que a opção de valor do comprimento e toda a scrollbar-widthpropriedade estão sendo consideradas para remoção em um rascunho futuro e, se isso acontecer, essa propriedade específica poderá ser removida do Firefox em uma versão futura.

Demonstração 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>

Posso oferecer uma alternativa?

Sem scripts, apenas estilos CSS padrão e um pouco de criatividade. Resposta curta - mascarar partes da barra de rolagem do navegador existente, o que significa que você mantém toda a sua funcionalidade.

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

Para demonstração e uma explicação um pouco mais aprofundada, confira aqui ...

jsfiddle.net/aj7bxtjz/1/

Eu pensei em compartilhar minhas descobertas caso alguém esteja considerando um plugin JQuery para fazer o trabalho.

Eu dei a barra de rolagem personalizada do JQuery . É bem chique e faz rolagem suave (com inércia de rolagem) e possui vários parâmetros que você pode ajustar, mas acabou sendo um pouco intenso de CPU para mim (e adiciona uma quantidade razoável ao DOM).

Agora estou dando uma chance à Perfect Scrollbar . É simples e leve (6KB) e está fazendo um trabalho decente até agora. Não requer muita CPU (pelo que sei) e adiciona muito pouco ao seu DOM. Ele tem apenas alguns parâmetros para ajustar (wheelSpeed ​​e wheelPropagation), mas é tudo o que preciso e lida com as atualizações do conteúdo de rolagem (como carregar imagens).

PS: Eu dei uma olhada rápida no JScrollPane, mas o @simone está certo, está um pouco datado agora e é um PITA.

Desde o Firefox 64 , é possível usar novas especificações para um estilo simples na barra de rolagem ( não tão completo quanto no Chrome com prefixos de fornecedor ).

Em este exemplo é possível ver uma solução que combine regras diferentes para o endereço Firefox e Chrome com uma semelhante (não igual) resultado final (exemplo uso suas regras Chrome originais):

As principais regras são:

Para o Firefox

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

Para Chrome

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

Observe que em relação à sua solução, é possível usar também regras mais simples do Chrome, como a seguir:

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

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

Finalmente, para ocultar setas nas barras de rolagem também no Firefox, atualmente é necessário defini-lo como " fino " com a seguinte regrascrollbar-width: thin;

Ano 2020 isso 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 no estilo do usuário e parece não funcionar em páginas da web. Eu não encontrei orientação oficial da Mozilla sobre isso. Embora possa ter funcionado em algum momento, o Firefox não possui suporte oficial para isso. Este bug ainda está aberto 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 obter detalhes.

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