如何定义CSS滚动条样式跨浏览器？我测试了这个代码，它只适用于IE和Opera，但在Chrome，Safari和Firefox中失败。CSS滚动条样式跨浏览器
<style type="text/css">
<!--
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
滚动条CSS样式是微软开发人员发明的一个奇怪的东西。它们不是CSS的W3C标准的一部分，因此大多数浏览器都忽略它们。
现在Webkit中也支持此功能。我认为Opera也支持他们。所以事实上，截至2012年，浏览器市场份额70％似乎支持它（它是滚动条的样式，它们仍然使用不同的语法来使得样式完成）。 –
现在，2013年，Opera也正在转向Webkit。真棒！ – Jimbo
请参阅http://stackoverflow.com/a/14150577/276648以获得更多完整答案。 – user276648
jScrollPane是一个很好的解决方案，可跨浏览器滚动条并很好地降级。
截至IE6我相信你不能使用这些属性自定义滚动条。上面链接的Chris Coyier文章详细介绍了用于自定义滚动条的webkit专有css选项。
如果你真的想要一个可以完全定制的跨浏览器解决方案，你将不得不使用一些JS。下面是一个名为FaceScroll的漂亮插件的链接：http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm
2013年真的有人还在编码到IE6吗？ – user2867288
@ user2867288 - 是的......是的。实际上，我为一家小型网络机构做了自由职业工作，他们将一些工作交给了我，并要求我将所有东西都做好。当时我终于放弃了整个机构作为客户，因为它变得如此荒谬。失去了不错的收入......但保持了我的理智。我不怀疑他们仍然需要在2016年的这一天。 –
这是作为答案发布的，但它不会试图回答这个问题。它应该可能是编辑，评论，另一个问题，或者完全删除。 – cybermonkey
Webkit对滚动条的支持是quite sophisticated。此CSS给出了一个非常小的滚动条，具有浅灰色轨道和较暗的拇指：
::-webkit-scrollbar
{
width: 12px; /* for vertical scrollbars */
height: 12px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track
{
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb
{
background: rgba(0, 0, 0, 0.5);
}
This answer是附加信息的奇妙源。
很酷。谢谢。 – clime
但是这在IE中不起作用 – user2886091
另请参阅：http://css-tricks.com/custom-scrollbars-in-webkit/ –
试试这个在IE和Safari和FF上使用和测试非常简单，并且工作良好，旁边不需要很多div只需加上id，它会在您连接Js和Css文件后正常工作。 FaceScroll Custom scrollbar
希望它帮助的
编辑 第1步：下面的脚本添加到您的网页的部分：
<link href="general.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
$('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
})
</script>
第2步：然后在你的页面的正文中，添加在示例HTML块下面到您的页面。
<p><b>Scrollbar (default style) shows onMouseover</b></p>
<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">
From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its
</div>
<br />
<p><b>Scrollbar (alternate style), always shown</b></p>
<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">
From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its
</div>
这是作为答案发布的，但它不会尝试回答问题。它应该可能是编辑，评论，另一个问题，或者完全删除。 – cybermonkey
nanoScrollerJS是简单地使用。我总是用他们...
Browser compatibility:
Mobile browsers support:
虽然这个链接可能回答这个问题，但最好在这里包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 - [来自评论]（/ review/low-quality-posts/18166529） – muttonlamb
对于WebKit浏览器（Chrome/Safari），您可以使用以下代码：http://stackoverflow.com/questions/7713599/styling-an-inner-scrollbar-like-the-twitter -conversation-interface/7713784＃7713784 – thirtydot
@graphicdivine，只有当他们改变整个主体的滚动条时才会出现这种情况。还有很多其他滚动条可以修改（在网页内），它与浏览器镶边无关。 – Dan
此链接显示您必须在Webkit浏览器上执行此操作：http://css-tricks.com/custom-scrollbars-in-webkit/ – user1108509