火狐 - 定制滚动条

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的滚动条...任何帮助，将不胜感激...预先感谢... :)

Answer 1

你不能因为bug #77790（链接1）。

错误77790 - （滚动条的颜色）的样式滚动条（结合:: - MOZ-水平滚动条XBL）\

的唯一方法是使用jQuery。我不知道如何编码，所以不要问我。我为jQuery滚动条准备了以下链接。 Click here!（链接2）

链接：

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

Answer 2

试试这个曾经

用于Firefox - 自定义滚动条

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