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

Question

我需要更改 Firefox 中的滚动条颜色。使用 CSS 我可以更改 IE 中的滚动条颜色。效果很好。但我在 Firefox 中看不到变化。

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

Answer 1

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

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

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

Answer 2

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

使用 JavaScript 和 CSS 自定义滚动条，并且可以使用许多插件。

Answer 3

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

Answer 4

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

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

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

Answer 5

没有 jQuery 就不行。这是因为 bug #77790。

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

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

Answer 6

对于 Firefox 或跨浏览器，您可以使用：
jQuery 自定义内容滚动器

更简单易用

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

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

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

Add the class mCustomScrollbar to any element you want to add custom scrollbar(s) with default options. Example of mine : <div class="long40 right reviews-frame mCustomScrollbar">
Call mCustomScrollbar function on the element selector you want to add the scrollbar(s). I call in bottom of my phtml page (list.phtml) like this :

....    
</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 */
}