Question

我想在Firefox中更改滚动条颜色。我怎么能这样做？

Answer 1

在Firefox中更改滚动条颜色并不像在Internet Explorer和Opera中那样简单。 Firefox仅允许主题设置滚动条的样式。这是一件好事。很多用户不喜欢在设计师随心所欲地随意改变界面小部件的外观和感觉。对于可能使用高对比度主题的视障用户来说，更改界面部件的外观可能更加困难。

也就是说，如果滚动条包含在页面的<div>中，您可以创建自定义滚动条并使用JavaScript使其正常运行。这个jQuery插件看起来很漂亮：http://jscrollpane.kelvinluck.com/

我认为这或多或少是你想要做的：http://martinsmucker.com/demo/scroller.html

以下是它的工作原理：

在文档的<head>中，我们必须引用几个样式表和脚本（您可能已经从http://jscrollpane.kelvinluck.com/下载了这些样式表和脚本。

这是绝大多数魔法发生的地方：

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0;
        padding:0;
    }
    #container {
        height:100%;
        width:100%;
        margin: 0;
        padding:0;
        overflow: auto;
    }
</style>

<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.scroll-pane').jScrollPane();
    });
</script>

这假设css和js文件与html文件位于同一目录中。我们首先链接到提供的样式表。

然后，添加一些CSS以防止显示正常的滚动条。将html和body的margin和padding设置为0，并将height设置为100％。我们所有的内容都将包含在id为“container”的div中。此容器完全填充页面（高度：100％;宽度：100％;）并且它会窃取滚动条，以便我们可以自定义滚动条（overflow: auto;）。

然后我们引用所有适当的脚本。这里我使用的是谷歌托管的jQuery副本，我再次假设所有本地脚本都与html文件位于同一目录中。最后一点jquery使用“scroll-pane”类找到所有div，并为它们添加适当的元素和滚动功能。

html非常简单。

<body>
    <div class="scroll-pane" id="container">
    All of your content for the page goes here.
    </div>
</body>

如果你做的一切都正确，那么你的页面看起来就像我的例子。

Answer 2

Chrome和Safari确实支持滚动条的着色。将以下代码放在您的CSS中，看看神奇的事情发生了：

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}

唯一缺少的是firefox支持此功能。

Answer 3

无法直接通过CSS。

但是如果你可以使用jQuery，jscrollpane可以帮助你。

Answer 4

你不能。正如你所看到的here，这只能是fpr IE5 +和Opera7.2 +。

编辑：使用一些javascript可以构建自己的“html-scrollbars”，可以像你想要的那样设置样式 - 但我不认为你应该这样做，写这个只是为了详细。

Answer 5

嗯，我听到有人说“不可能” ... 但是我不相信不可能。

在下面的示例中，我只想样式化主侧栏中的<ul>列表。只需为Firefox滚动条样式化尝试以下解决方案：

<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>

Css将是：

.scrollable {
overflow: auto;
max-height:80vh;
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}

.scrollable::-webkit-scrollbar {
width: 0.5em!important;
}

.scrollable::-webkit-scrollbar-track-piece {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.scrollable::-webkit-scrollbar-thumb:vertical {
background-color: #ddd;
outline: 1px solid slategrey;
}

以下是最终结果：

（注意：第一张图像是默认的滚动条颜色）。

Answer 6

据我所知，这并不是很有用，但值得注意的是，控制滚动条是否在Firefox中显示的属性是：（reference link）

Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars 
             are shown in the window. This attribute is "replaceable" 
             in JavaScript. Read only

Firefox还具有以下特定于供应商的属性：

溢出：-moz-scrollbars-none

其他有效值为-moz-scrollbars-horizontal和-moz-scrollbars-vertical。

Answer 7

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

更简单易用

这里的示例我在magento中实现并在firefox，opera，chrome和safari上进行测试：http://i.stack.imgur.com/wnRCL.png

Answer 8

从64版Firefox开始，滚动条的样式受到限制：

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

请参见https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

Firefox中的滚动条颜色更改

8 个答案: