Barra de rolagem CSS personalizada para Firefox

Eu quero personalizar uma barra de rolagem com CSS.

Eu uso este código CSS do WebKit, que funciona bem para Safari e 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 fazer isso facilmente usando jQuery, mas eu preferiria fazê-lo com CSS puro se ele's for possível.

Ficaria grato pelo conselho de alguém's expert advice!

Community
Pergunta editada :em
Programação
firefox css webkit scrollbar
29º maio 2011 в 1:44
22 vistas
Solução

A partir de finais de 2018, há agora uma personalização limitada disponível no Firefox!

Veja estas respostas:

E isto para informações de fundo: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

There's no Firefox equivalente a ::-webkit-scrollbar e amigos.

Você'terá que ficar com JavaScript.

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

Quanto às substituições do JavaScript, você pode tentar:

thirtydot
Resposta editada :em
Comentários (17)

Pensei em compartilhar minhas descobertas no caso de alguém estar considerando um plugin JQuery para fazer o trabalho.

Eu dei JQuery Custom Scrollbar uma tentativa. Ela'é bastante sofisticada e faz uma rolagem suave (com inércia de rolagem) e tem muitos parâmetros que você pode ajustar, mas acabou sendo um pouco intensa demais para mim (e adiciona uma boa quantidade ao DOM).

Agora I'm dando Perfect Scrollbar uma tentativa. It's simples e leve (6KB) e it's fazendo um trabalho decente até agora. It's não tem CPU intensiva (tanto quanto posso dizer) e adiciona muito pouco ao seu DOM. It's tem apenas alguns parâmetros para ajustar (wheelSpeed e wheelPropagation), mas it's é tudo o que eu preciso e ele lida bem com atualizações do conteúdo de rolagem (como carregar imagens).

P.S. Eu dei uma olhada rápida no JScrollPane, mas @simone está certo, ele's um pouco datado agora e um PITA.

Matthew
Resposta editada :em
Comentários (4)

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

Adrian Rodriguez
Resposta editada :em
Comentários (5)