CSS 滚动条样式跨浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7725652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS scrollbar style cross browser
提问by yuli chika
How can I define a CSS scrollbar style cross browser? I tested this code, it only works in IE and opera, but failed in Chrome, Safari and Firefox.
如何定义跨浏览器的 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>
采纳答案by Till Helge
Scrollbar CSS styles are an oddity invented by Microsoft developers. They are not part of the W3C standard for CSS and therefore most browsers just ignore them.
滚动条 CSS 样式是 Microsoft 开发人员发明的一种奇怪的东西。它们不是 CSS 的 W3C 标准的一部分，因此大多数浏览器只是忽略它们。
回答by Drew Noakes
Webkit's support for scrollbars is quite sophisticated. This CSS gives a very minimal scrollbar, with a light grey track and a darker thumb:
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);
}
This answeris a fantastic source of additional information.
这个答案是额外信息的绝佳来源。
回答by Hussein
jScrollPaneis a good solution to cross browser scrollbars and degrades nicely.
jScrollPane是跨浏览器滚动条的一个很好的解决方案，并且降级很好。
回答by Footniko
nanoScrollerJSis simply to use. I always use them...
nanoScrollerJS简单易用。我总是用它们...
Browser compatibility:
- IE7+
- Firefox 3+
- Chrome
- Safari 4+
- Opera 11.60+
- IE7+
- 火狐 3+
- 铬合金
- 野生动物园 4+
- 歌剧 11.60+
Mobile browsers support:
- iOS 5+ (iPhone, iPad and iPod Touch)
- iOS 4 (with a polyfill)
- Android Firefox
- Android 2.2/2.3 native browser (with a polyfill)
- Android Opera 11.6 (with a polyfill)
- iOS 5+（iPhone、iPad 和 iPod Touch）
- iOS 4（带有polyfill）
- 安卓火狐
- Android 2.2/2.3 原生浏览器（带有 polyfill）
- Android Opera 11.6（带有 polyfill）
Code example from the Documentation,
文档中的代码示例，
- Markup - The following type of markup structure is needed to make the plugin work.
- 标记 - 需要以下类型的标记结构来使插件工作。
<div id="about" class="nano">
<div class="nano-content"> ... content here ... </div>
</div>
回答by DMTintner
As of IE6 I believe you cannot customize the scroll bar using those properties. The Chris Coyier article linked to above goes into nice detail about the options for webkit proprietary css for customizing the scroll bar.
从 IE6 开始，我相信您无法使用这些属性自定义滚动条。上面链接的 Chris Coyier 文章详细介绍了用于自定义滚动条的 webkit 专有 css 选项。
If you really want a cross browser solution that you can fully customize you're going to have to use some JS. Here is a link to a nice plugin for it called FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm
如果你真的想要一个可以完全自定义的跨浏览器解决方案，你将不得不使用一些 JS。这是一个名为 FaceScroll 的不错插件的链接：http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm
回答by Yousef Altaf
try this it's very easy to use and tested on IE and Safari and FF and worked fine and beside no need for many divaround it just add idand it will work fine, after you link you Js and Css files. FaceScroll Custom scrollbar
试试这个，它非常易于使用，并在 IE、Safari 和 FF 上进行了测试，并且运行良好，而且不需要div围绕它进行许多操作，只需添加id它，在您链接 Js 和 Css 文件后，它就可以正常工作。FaceScroll 自定义滚动条
hope it help's
希望能帮助到你
EditStep 1: Add the below script to the section of your page:
编辑第 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>
Step 2: Then in the BODY of your page, add the below sample HTML block to your page.
第 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>
