CSS Firefox 中的滚动条颜色更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3890471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrollbar color change in Firefox
提问by XMen
I want to change the scrollbar color in Firefox. How can I do that?
我想更改 Firefox 中的滚动条颜色。我怎样才能做到这一点？
采纳答案by Michael Martin-Smucker
Changing the scrollbar color in Firefox is not as trivial as it is in Internet Explorer and Opera. Firefox only allows the style of the scrollbar to be set by the theme. This is a good thing. Lots of users don't like having the look and feel of interface widgets randomly changed at the whim of a designer. Changing the look of interface pieces can be even more of a problem for visually impaired visitors who may be using a high contrast theme.
在 Firefox 中更改滚动条颜色不像在 Internet Explorer 和 Opera 中那么简单。Firefox 只允许主题设置滚动条的样式。这是一件好事。许多用户不喜欢界面小部件的外观和感觉随设计师的心血来潮而随机改变。对于可能使用高对比度主题的视障访问者来说，更改界面部分的外观甚至可能是一个更大的问题。
That said, if the scrollbar is contained within a <div>in your page, you can create a custom scrollbar and make it functional using JavaScript. This jQuery plugin looks like it would do the trick pretty nicely: http://jscrollpane.kelvinluck.com/
也就是说，如果滚动条包含<div>在您的页面中，您可以创建一个自定义滚动条并使用 JavaScript 使其发挥作用。这个 jQuery 插件看起来很不错：http: //jscrollpane.kelvinluck.com/
I think this is more or less what you want to do: http://martinsmucker.com/demo/scroller.html
我认为这或多或少是你想要做的：http: //martinsmucker.com/demo/scroller.html
Here's how it works:
这是它的工作原理：
Inside the document's <head>, we have to reference several stylesheets and scripts (which you've probably already downloaded from http://jscrollpane.kelvinluck.com/.
在文档的 中<head>，我们必须引用几个样式表和脚本（您可能已经从http://jscrollpane.kelvinluck.com/下载了它们。
This is where a vast majority of the magic happens:
这是绝大多数魔法发生的地方：
<!-- 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>
This assumes that the css and js files are located in the same directory as your html file. We start by linking to the provided stylesheet.
这假设 css 和 js 文件与您的 html 文件位于同一目录中。我们首先链接到提供的样式表。
Then, add a bit of CSS to prevent the normal scrollbars from showing. Set the marginand paddingof html and body to 0, and set the heightto 100%. All of our content will be wrapped in a div with an id of "container". This container fills the page exactly (height: 100%; width:100%;) and it steals the scrolling so that we can customize the scrollbar (overflow: auto;).
然后，添加一些 CSS 以防止显示正常的滚动条。设置margin和paddingHTML和身体为0，并设置height为100％。我们所有的内容都将被包装在一个 id 为“容器”的 div 中。这个容器准确地填充了页面（高度：100%；宽度：100%；）并且它窃取了滚动，以便我们可以自定义滚动条 ( overflow: auto;)。
Then we reference all of the appropriate scripts. Here I'm using the copy of jQuery hosted by Google, and again I'm assuming that all of the local scripts are in the same directory as the html file. The last little bit of jquery finds all of the divs with the "scroll-pane" class and adds the appropriate elements and scroll functionality to them.
然后我们引用所有适当的脚本。在这里，我使用了由 Google 托管的 jQuery 副本，并再次假设所有本地脚本与 html 文件位于同一目录中。jquery 的最后一点用“scroll-pane”类查找所有 div，并为它们添加适当的元素和滚动功能。
The html is then very simple.
html 就非常简单了。
<body>
<div class="scroll-pane" id="container">
All of your content for the page goes here.
</div>
</body>
If you've done everything right, your page should look like my example.
如果你做的一切都正确，你的页面应该看起来像我的例子。
回答by Sander
Chrome and Safari do support the coloring of the scrollbars. Place the following code in your css and see the magic happen:
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;
}
The only thing missing is for firefox to support this feature.
唯一缺少的是 Firefox 支持此功能。
回答by Nivas
It is not possible directly via CSS.
不能直接通过 CSS。
But if you can use jQuery, jscrollpanemay help you.
但是如果你可以使用 jQuery，jscrollpane可能会帮助你。
回答by oezi
you can't. as you can see here, this is only possible fpr IE5+ and Opera7.2+.
你不能。正如您在此处看到的，这仅适用于 fpr IE5+ 和 Opera7.2+。
EDIT:with a bit of javascript it could be possible to build you own "html-scrollbars" that could be styled like you want them - but i don't think you should do that, writing this just to be detailed.
编辑：使用一些 javascript 可以构建你自己的“html-scrollbars”，它可以像你想要的那样设计 - 但我认为你不应该这样做，写这个只是为了详细。
回答by Jodyshop
Well, I have heard someone saying "It's Impossible"... But I don't believe in the impossible.
嗯，我听到有人说“这是不可能的”……但我不相信不可能。
In the follwing example I only want to stylize the <ul>list in the main sidebar. Simply try this solution for Firefox scrollbar stylizes:
在以下示例中，我只想对<ul>主侧栏中的列表进行样式化。只需为 Firefox 滚动条风格化尝试这个解决方案：
<div class="parent">
<div class="sidebar">
<ul class="scrollable">
<li></li>
</ul>
</div>
</div>
The Css will be:
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;
}
Here are the final results:
以下是最终结果：
(Note: The first image is the default scrollbar color).
（注意：第一张图片是默认的滚动条颜色）。
回答by davidcondrey
This is not really useful as far as I know, but it's worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is: (reference link)
据我所知，这并不是很有用，但值得注意的是，控制是否在 Firefox 中显示滚动条的属性是：（参考链接）
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 also has the following vendor specific properties:
Firefox 还具有以下供应商特定属性：
overflow: -moz-scrollbars-none
溢出：-moz-scrollbars-none
other valid values are -moz-scrollbars-horizontal and -moz-scrollbars-vertical.
其他有效值是 -moz-scrollbars-horizontal 和 -moz-scrollbars-vertical。
回答by Andhi Irawan
for Firefox or cross browser you can use : jQuery custom content scroller
对于 Firefox 或跨浏览器，您可以使用： jQuery custom content scroller
more simple and easy to use
更简单易用
here sample i implement in magento and tested on firefox, opera, chrome and safari : http://i.stack.imgur.com/wnRCL.png
这里示例我在 magento 中实现并在 firefox、opera、chrome 和 safari 上测试：http: //i.stack.imgur.com/wnRCL.png
回答by salomvary
Since version 64 Firefox allows limited styling of scrollbars:
由于版本 64 Firefox 允许滚动条的有限样式：
.my-scrollable {
scrollbar-color: red blue;
scrollbar-width: thin;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
