在 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;）。
然后我们引用所有适当的脚本。在这里，我使用的是由 Google 托管的 jQuery 副本，并且我再次假设所有本地脚本都与 html 文件位于同一目录中。最后一点 jquery 找到所有带有“滚动窗格”类的 div，并为它们添加适当的元素和滚动功能。
那么 html 就非常简单了。
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
如果你做的一切都正确，你的页面应该看起来像我的例子。