如何更改 Firefox（特定）中的滚动条颜色？答案

【问题标题】：How to change the scroll bar color in Firefox(Specific)?如何更改 Firefox（特定）中的滚动条颜色？
【发布时间】：2011-03-05 07:57:20
【问题描述】：

我需要更改 Firefox 中的滚动条颜色。使用 CSS 我可以更改 IE 中的滚动条颜色。它工作正常。但我看不到 Firefox 的变化。

我不想要任何自定义滚动条。我只想将颜色应用到默认滚动条。

【问题讨论】：

标签： css firefox scrollbar

【解决方案1】：

对于 Firefox 或跨浏览器，您可以使用： jQuery custom content scroller

更简单易用

Github：https://github.com/malihu/malihu-custom-scrollbar-plugin

如何使用：从网络或 Github 下载源代码。

在您的标题中包含 jquery.mCustomScrollbar.concat.min.js 和 jquery.mCustomScrollbar.css。

将类 mCustomScrollbar 添加到您想要使用默认选项添加自定义滚动条的任何元素。我的例子：<div class="long40 right reviews-frame mCustomScrollbar"> 在要添加滚动条的元素选择器上调用 mCustomScrollbar 函数。我像这样调用我的 phtml 页面（list.phtml）的底部：

....    
</div>
<script>
(function($){
    $(window).load(function(){
        $(".content").mCustomScrollbar();
    });
})(jQuery);
</script>

您在他们的网站上阅读的其他设置和文档。

我在 Magento 中使用的示例：i.imgur.com/3OwGQld.png

以下我修改的滚动条颜色 css 代码示例：

#mCSB_1_dragger_vertical {
   height: 130px !important; /* height of the scrollbar */
}
.mCSB_dragger_bar {
   background-color: #ececec !important; /* color of the dragger bar */
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
   width: 10px !important; /* width of the dragger bar */
}
.mCSB_scrollTools .mCSB_draggerRail {
   background-color: #888888 !important; /* color of the rail */
   width: 10px !important; /* width of the rail for dragger bar */
}

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
@LeftyX，我添加了对其使用的简要说明。更多细节可以在他们的网站上阅读。而且我已经尝试过，与 jScrollPane 相比，使用更容易。

【解决方案2】：

你根本不能没有 jQuery。这是因为错误 #77790。

错误 77790 - (scrollbar-colors) 设置滚动条样式（绑定 ::-moz-horizontal-scrollbar 到 XBL）

唯一的方法是使用 jQuery 插件。我有你的链接！
• http://plugins.jquery.com/custom-scrollbar/ - jQuery 自定义滚动条
• http://jscrollpane.kelvinluck.com/ - jScrollPane
• https://www.google.ca/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=jquery%20scrollbar - 谷歌搜索

【讨论】：

【解决方案3】：

使用jScrollPane 将解决跨浏览器的滚动颜色问题。

用法很简单，比如：$("#someDivId").jScrollPane(); 我在 FireFox/IE/Chrome 下测试并得到相同的 UI 结果。

同样使用jScrollBar，但在使用jScrollBar之前需要多个div，而不是一个div。

【讨论】：

【解决方案4】：

不幸的是，如果没有自定义滚动条，这是不可行的。

【讨论】：

【解决方案5】：

并非所有浏览器都允许您控制其滚动条的样式。

您可以使用声称跨浏览器兼容的插件来伪造滚动条：

http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/

【讨论】：

【解决方案6】：

您不能对默认滚动条执行此操作。

使用使用 javascript 和 CSS 的自定义滚动条，将提供大量插件。

【讨论】：