火狐浏览器 - 自定义滚动条

Question

我有以下代码，用于自定义WebKit滚动条...

/*webkit scroll bar*/  

::-webkit-scrollbar {
    width: 6px;
}


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0); 
}

我想要做的是像这样自定义在Firefox中加载的页面的滚动条...为此我尝试了下面的代码...

/*mozilla scroll bar*/  

::-moz-scrollbar {
    width: 6px;
}


::-moz-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


::-moz-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-moz-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0); 
}

但它不起作用......我该如何以与WebKit相同的方式自定义滚动条...任何帮助将不胜感激...提前致谢... :)

- asdf

---

Firefox没有类似的东西（而且，你甚至没有转换所有的前缀）。 - BoltClock

所以...基本上你想说的是我做不到... - asdf

Answer 1

由于错误 #77790 (链接#1)，你无法更改滚动条样式。

Bug 77790 - (scrollbar-colors) Style the scrollbar (binding ::-moz-horizontal-scrollbar to XBL)\

唯一的方法是使用jQuery。我不知道如何编写代码，所以不要问我。我为jQuery滚动条准备了以下链接。点击这里！(链接#2)

链接:

• https://bugzilla.mozilla.org/show_bug.cgi?id=77790
• http://plugins.jquery.com/custom-scrollbar/

- MineCMD

Answer 2

FireFox支持以下两个属性:

1. scrollbar-width：auto | thin | none ...
2. scrollbar-color

- Paresh Rajput

Answer 3

现在对于火狐浏览器，你可以使用这个。

.element{
 scrollbar-width: thin;
 scrollbar-color: blue transparent;

}

其中蓝色代表拇指，透明色代表轨道。

- nativelectronic