CSS滚动条样式跨浏览器
我怎样才能定义一个CSS滚动条样式跨浏览器？ 我testing了这个代码，它只适用于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> 滚动条CSS样式是微软开发人员发明的一个奇怪的东西。 它们不是W3C的CSS标准的一部分，因此大多数浏览器都忽略它们。
Webkit对滚动条的支持相当复杂 。 这个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); }
这个答案是额外信息的一个奇妙的来源。
jScrollPane是一个很好的解决scheme，跨浏览器滚动条，并很好地降解。
此链接显示您必须在Webkit浏览器上执行此操作：
nanoScrollerJS就是简单的使用。 我总是用他们…
浏览器兼容性
- IE7 +
- Firefox 3 +
- 铬
- Safari 4+
- Opera 11.60以上
移动浏览器支持：
- iOS 5+（iPhone，iPad和iPod Touch）
- iOS 4（使用polyfill）
- Android Firefox
- Android 2.2 / 2.3原生浏览器（带有polyfill）
- Android Opera 11.6（带有polyfill）
从IE6我相信你不能使用这些属性自定义滚动条。 上面链接的Chris Coyier文章详细介绍了用于自定义滚动条的webkit专有css的选项。
如果你真的想要一个跨浏览器的解决scheme，你可以完全自定义你将不得不使用一些JS。 下面是一个名为FaceScroll的漂亮插件的链接： http ://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm
尝试这是很容易使用和testingIE和Safari和FF和工作正常，旁边没有多lessdiv围绕它只需添加id ，它会工作正常后，你链接你的Js和Css文件。 FaceScroll自定义滚动条
希望它的帮助
编辑步骤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：然后在页面的BODY中，将下面的示例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>
