Javascript 如何更改滚动条的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1997645/
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
How to change the color of scrollbars
提问by Gopal
I want to change the color of the scrollbars on my pages in Internet Explorer and Firefox.
我想在 Internet Explorer 和 Firefox 中更改页面上滚动条的颜色。
This code creates scrollbars:
此代码创建滚动条：
<div style="overflow: auto; width: 750px; height: 400px">
</div>
To change their color, I tried this code:
为了改变它们的颜色，我尝试了这个代码：
<STYLE TYPE="text/css">
BODY
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-DarkShadow-Color: blue;
}
</STYLE>
The above code is in my header, but it didn't change the scrollbars' color.
上面的代码在我的标题中，但它没有改变滚动条的颜色。
Can anyone help me?
谁能帮我？
回答by Newtang
Just as others said, the CSS you posted won't work on modern browsers (IE8, Safari, Firefox, etc). Since you're trying to scroll a div, you do, however, have the option of making a custom scrollbar in Javascript/DHTML. A quick Google search reveals a few have done just that like this one: http://www.hesido.com/web.php?page=customscrollbar
正如其他人所说，您发布的 CSS 不适用于现代浏览器（IE8、Safari、Firefox 等）。由于您正在尝试滚动 div，因此您可以选择在 Javascript/DHTML 中制作自定义滚动条。一个快速的谷歌搜索显示一些已经这样做了：http: //www.hesido.com/web.php?page=customscrollbar
回答by CoursesWeb
For Chrome and Safari you can change the scrollbar style using this code:
对于 Chrome 和 Safari，您可以使用以下代码更改滚动条样式：
/* Chrome, Safari */
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
回答by tiaratial
Just copy and paste after head for
只需在前往后复制和粘贴
1.rounded corners style
1.圆角样式
<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>
2.square corners with border style
2.带边框样式的方角
<style type="text/css">
::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
::-webkit-scrollbar-thumb {background-color:#ffffff ; border: 1px solid black;}
</style>
you can change the color for code click hereor here
回答by Doug Neiner
That code only works in Internet Explorer. Are you testing in Firefox or Safari by chance?
该代码仅适用于 Internet Explorer。您是偶然在 Firefox 或 Safari 中进行测试吗？
回答by Ruth
Create a class for the div, code the scrollbar colors in that class, then apply it to the div. You are not changing the scrollbar colors on the browser, only the div you are creating. Your div would be <div style="overflow: auto; width: 750px; height: 400px" class="className"> </div>
为 div 创建一个类，在该类中编码滚动条颜色，然后将其应用到 div。您不会更改浏览器上的滚动条颜色，只会更改您正在创建的 div。你的 div 是<div style="overflow: auto; width: 750px; height: 400px" class="className"> </div>
In your class you would create the scrollbar colors using the applicable scrollbar part names, i.e. scrollbar-face-color and so on. To find out which code applies to which area of the scroll check http://iebar.discoveryvip.com/, or you can search on the web, there are a number of places for that.
在您的课程中，您将使用适用的滚动条部件名称（即 scrollbar-face-color 等）创建滚动条颜色。要找出哪个代码适用于滚动检查http://iebar.discoveryvip.com/ 的哪个区域，或者您可以在网络上搜索，有很多地方可以找到。
回答by tiaratial
This code was easyer just paste after
这段代码更容易粘贴
< h e a d >
<头>
<style type="text/css">
::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 1ex; }
</style>
回答by alex
It works in IE5 to 7. It has been discontinued in IE8. Safari recently gave support for it using different css properties I believe.
它适用于 IE5 到 7。它已在 IE8 中停止使用。我相信 Safari 最近使用不同的 css 属性支持它。
There are usability concerns with changing the scrollbar colour.
更改滚动条颜色存在可用性问题。
回答by CodeOptimizer
enter code here
html,body{
scrollbar-face-color: #414340;
scrollbar-shadow-color: #cccccc;
scrollbar-highlight-color: #cccccc;
scrollbar-3dlight-color: #cccccc;
scrollbar-darkshadow-color: #cccccc;
scrollbar-track-color: #cccccc;
scrollbar-arrow-color: #000000;
}
回答by VAMSHI PAIDIMARRI
We can change color of scrollbar using javascript also. There are various components in scroll bar like base color, face color, arrow color etc that changes color of various parts of scroll bar. The following lines might help you.
我们也可以使用 javascript 更改滚动条的颜色。滚动条中有各种组件，如基色、面色、箭头颜色等，可以改变滚动条各个部分的颜色。以下几行可能对您有所帮助。
document.body.style.scrollbarBaseColor = "colorname";
document.body.style.scrollbarArrowColor = "colorname";
document.body.style.scrollbarTrackColor = "colorname";
Apart from the above styles, you will have scrollbarShadowColor, scrollbarHighlightColor, scrollbar3dlightColor,scrollbarDarkshadowColor etc. So, choose your component of scroll bar and change the color of it.
除了上面的样式，你还会有 scrollbarShadowColor、scrollbarHighlightColor、scrollbar3dlightColor、scrollbarDarkshadowColor 等等。所以，选择你的滚动条组件并改变它的颜色。
回答by Hemanshu Bhojak
Try this
尝试这个
*, html {
scrollbar-face-color: #FF0000;
scrollbar-shadow-color: #0000FF;
scrollbar-highlight-color: #00FF00;
scrollbar-3dlight-color: #FF00FF;
scrollbar-darkshadow-color: #00FFFF;
scrollbar-track-color: #FFFF00;
scrollbar-arrow-color: #000000;}
