CSS滚动条样式的跨浏览器

如何定义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>

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

是跨浏览器滚动条的一个很好的解决方案，可以很好地降低性能

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

---

如果你真的想要一个可以完全定制的跨浏览器解决方案，你必须使用一些JS。这里有一个链接，指向一个名为FaceScroll的插件：

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

---

是一个非常好的附加信息源。

试试这个，它非常容易使用，在IE、Safari和FF上测试，工作很好，而且不需要很多

div

围绕它，只需添加

id

，在链接Js和Css文件后，它就会工作得很好

希望对你有帮助

编辑 步骤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>

jQuery（函数（）{//on page DOM load
$（'#demo1'）。交替滚动（）；
$（“#demo2”）.alternateScroll（{“垂直条类”：“styled-v-bar”，“隐藏条”：false}）；
})

步骤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>

滚动条（默认样式）显示onMouseover

来自维基百科——火药，自19世纪末即被称为黑火药，是第一种化学炸药，也是直到19世纪中期已知的唯一一种化学炸药。[2]它是硫、木炭和硝酸钾（硝石）的混合物，硫和木炭用作燃料，而硝石则作为氧化剂。[3]因为其独特的性质
滚动条（备用样式），始终显示

来自维基百科——火药，自19世纪末即被称为黑火药，是第一种化学炸药，也是直到19世纪中期已知的唯一一种化学炸药。[2]它是硫、木炭和硝酸钾（硝石）的混合物，硫和木炭用作燃料，而硝石则作为氧化剂。[3]因为其独特的性质 简单易用。我总是用它们

Browser compatibility: 浏览器兼容性：

• IE7+
• 火狐3+
• 铬
• 狩猎4+
• 歌剧11.60+

移动浏览器支持：

• iOS 5+（iPhone、iPad和iPod Touch）
• iOS 4（带多边形填充）
• 安卓火狐
• Android 2.2/2.3本机浏览器（带polyfill）
• Android Opera 11.6（带有polyfill）

文档中的代码示例

标记-需要以下类型的标记结构才能使插件正常工作

... 内容在这里。。。

对于WebKit浏览器（Chrome/Safari），您可以使用以下命令：@GraphicsDivine，只有在更改整个主体的滚动条时才会出现这种情况。还有很多其他的滚动条可以被修改（在网页中），而与浏览器chrome无关。这个链接显示你必须在Webkit浏览器上进行修改：现在Webkit也支持它。我认为歌剧也支持他们。因此，事实上，截至2012年，70%的浏览器市场份额似乎确实支持它（滚动条的样式化，每个浏览器仍然使用不同的语法来完成样式化）。现在，2013年，Opera也开始转向Webkit。令人惊叹的！请参阅，以获得更完整的备选答案。@jmendeth好吧，我没有花时间亲自测试它，但据我所知，它应该适用于IE、Chrome和Firefox。根据IE风格的规则，在Opera中也有效（ed？），但仅在主页滚动条上有效。不在textarea或div等的上面…每个人都会喜欢的。来自IE时代的一个聪明想法？这只适用于垂直滚动条吗？@paradroidψ它也适用于水平滚动内容。它不会很好地降级。在很多情况下，它都不会创建滚动条（我在Firefox21中启用了），但在IESee中也不起作用：这在chrome上也会起作用。firefox和IE呢？@SHEKHARSHETE，是的，这种方法只适用于WebKit。如果您需要支持其他浏览器，您应该参考其他答案，可能与这些供应商前缀的CSS选择器配合使用。不适用于FFT 2013年是否真的有人仍在使用IE6编码？@user2867288-是的……是的，确实有。事实上，我在一家小型网络代理公司做过自由职业者的工作，这家公司会把他们的一些工作转包给我，这就要求我让所有的东西都具备IE6的能力。我最终放弃了作为客户的整个机构，因为这太荒谬了。失去了一笔可观的收入…但保持了我的理智。我毫不怀疑，他们在2016年的今天仍然需要它。这是作为一个答案发布的，但它并不试图回答这个问题。它可能是一个编辑、评论、另一个问题或全部删除。这是作为答案发布的，但它不会尝试回答该问题。它可能是一个编辑，一个评论，另一个问题，或完全删除。 Mobile browsers support: