CSS滚动条样式跨浏览器

Question

如何定义跨浏览器的 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>

Answer 1

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);
}

这个答案是额外的绝佳来源信息。

Answer 2

滚动条 CSS 样式是 Microsoft 开发人员发明的一个奇怪的东西。它们不是 W3C CSS 标准的一部分，因此大多数浏览器都会忽略它们。

Answer 3

jScrollPane 是跨浏览器滚动条的一个很好的解决方案，并且可以很好地降级。

Answer 4

nanoScrollerJS 使用起来很简单。我总是使用它们...

Browser compatibility:

• IE7+
• Firefox 3+
• Chrome
• Safari 4+
• Opera 11.60+

Mobile browsers support:

• iOS 5+ (iPhone、iPad 和 iPod Touch)
• iOS 4 (带有polyfill)
• Android Firefox
• Android 2.2/2.3 本机浏览器(带有polyfill)
• Android Opera 11.6（带有polyfill）

文档中的代码示例，

1. 标记 - 需要以下类型的标记结构才能使插件工作。

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

Answer 5

从 IE6 开始，我相信您无法使用这些属性自定义滚动条。上面链接的 Chris Coyier 文章详细介绍了用于自定义滚动条的 webkit 专有 CSS 选项。

如果你真的想要一个可以完全自定义的跨浏览器解决方案，你将不得不使用一些 JS。这里有一个名为 FaceScroll 的不错插件的链接：http://www.dynamicdrive。 com/dynamicindex11/facescroll/index.htm

Answer 6

尝试一下，它非常容易使用，并在 IE、Safari 和 FF 上进行了测试，并且工作正常，而且不需要太多 div ，只需添加 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：然后在页面的正文中，将以下示例 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>