如何定义跨浏览器的 CSS 滚动条样式? 我测试了这段代码，只在 IE 和 Opera 中生效，在 Chrome、Safari 和 Firefox 中都失败了。
<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>
::-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);
}
这个答案 是一个非常好的额外信息来源。
滚动条CSS样式是由微软开发人员发明的奇怪东西。它们不是CSS的W3C标准的一部分，因此大多数浏览器都会忽略它们。
jScrollPane 是一个优秀的解决方案，可以跨浏览器滚动条，并且降级良好。
nanoScrollerJS 非常易于使用。我总是使用它们...
浏览器兼容性:
移动浏览器支持:
来自文档的代码示例：
<div id="about" class="nano">
<div class="nano-content"> ... content here ... </div>
</div>
我认为从IE6开始，您无法使用这些属性自定义滚动条。上面链接的Chris Coyier文章详细介绍了用于自定义滚动条的webkit专有CSS选项。
如果您真的想要一个跨浏览器解决方案，可以完全自定义，则必须使用一些JS。这里是一个名为FaceScroll的不错插件的链接：http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm
试试这个，它非常易于使用，并在IE、Safari和FF上进行了测试，运行良好，而且不需要很多div，只需添加id即可正常工作，在链接Js和Css文件后。 FaceScroll自定义滚动条
希望能帮到你。
编辑
步骤1：将以下脚本添加到页面的<head>部分：
<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>