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。因为＃77790的错误。

错误77790 - （滚动条颜色）设置滚动条样式（将:: :: moz-horizontal-scrollbar绑定到XBL）

唯一的方法是使用jQuery插件。我有链接给你！
•http://plugins.jquery.com/custom-scrollbar/ - jQuery Custom Scrollbar
•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 custom content scroller

更简单易用

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

使用方法：从Web或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 */
}

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

6 个答案: