很久以前，您可以在 IE（例如 v5.5）中使用非标准 CSS 属性（如 scrollbar-base-color）来自定义滚动条，您可以将其用于滚动元素（如 <body>）并执行 非常酷的事情。IE 弃用了该功能。
如今，自定义滚动条又回来了，但这次是 WebKit。现在稍微好一点，因为这些属性带有供应商前缀（例如 ::-webkit-scrollbar）并使用“Shadow DOM”。这已经存在几年了。David Hyatt 在 2009 年初 发布了博文。
具体内容
不同的部分
这些是伪元素本身。滚动条的实际部分。
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
不同的状态
这些是伪类选择器。它们允许更具体地选择部分，例如当滚动条处于不同状态时。
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive我将从 David 在 WebKit 博客上的博文 中窃取整个部分，因为它很好地解释了每个部分
:horizontal – 水平伪类应用于任何具有水平方向的滚动条部分。
:vertical – 垂直伪类应用于任何具有垂直方向的滚动条部分。
:decrement – 减量伪类应用于按钮和轨道部分。它指示按钮或轨道部分在使用时是否会减小视图的位置（例如，在垂直滚动条上向上，在水平滚动条上向左）。
:increment – 增量伪类应用于按钮和轨道部分。它指示按钮或轨道部分在使用时是否会增加视图的位置（例如，在垂直滚动条上向下，在水平滚动条上向右）。
:start – 开始伪类应用于按钮和轨道部分。它指示对象是否放置在滑块之前。
:end – 结束伪类应用于按钮和轨道部分。它指示对象是否放置在滑块之后。
:double-button – 双按钮伪类应用于按钮和轨道部分。它用于检测按钮是否属于一对位于滚动条同一端的按钮的一部分。对于轨道部分，它指示轨道部分是否与一对按钮相邻。
:single-button – 单按钮伪类应用于按钮和轨道部分。它用于检测按钮是否单独位于滚动条的末端。对于轨道部分，它指示轨道部分是否与单个按钮相邻。
:no-button – 应用于轨道部分，并指示轨道部分是否延伸到滚动条的边缘，即该端没有按钮。
:corner-present – 应用于所有滚动条部分，并指示是否存在滚动条角。
:window-inactive – 应用于所有滚动条部分，并指示包含滚动条的窗口当前是否处于活动状态。（在最近的 nightly 版本中，此伪类现在也应用于 ::selection。我们计划将其扩展以适用于任何内容，并将其作为新的标准伪类提出。）
现在一起使用
这些伪元素和伪类选择器协同工作。以下是一些随机示例
::-webkit-scrollbar-track-piece:start {
/* Select the top half (or left half) or scrollbar track individually */
}
::-webkit-scrollbar-thumb:window-inactive {
/* Select the thumb when the browser window isn't in focus */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/* Select the down or left scroll button when it's being hovered by the mouse */
}非常简单的示例
要制作一个非常简单的自定义滚动条，我们可以这样做
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}在这种情况下，我们会在一个带有垂直溢出文本的简单 div 上获得以下内容
在实际应用中
查看 Tim Van Damme 的博客 Maxvoltar 上非常微妙且漂亮的滚动条（**2012 年 9 月更新**：Tim 的网站不再使用此设计）
这里特别棒的一点是，滚动条位于 body 元素上，但滚动条没有像通常那样粘在浏览器窗口的顶部、底部或右侧边缘。我创建了一个测试页面，其中包含可复制粘贴的代码以实现类似的效果
在 Forrst 上，他们在代码片段上使用了自定义滚动条，这些滚动条也非常不错。它们的视觉效果不那么强烈，因此与代码突出显示的冲突较少。
不错，但是 style.css … 404；)
Max Voltar 网站在 Chrome 中有效。
您的示例并非如此。
Chrome 10 也是如此。
它在我的 Chrome 10 中运行良好。
不错的技巧，绝对为网站增添了一丝亮点。
在 Chrome 中运行良好，朋友。
谢谢
如果我想在非 WebKit 浏览器上显示自定义滚动条，该怎么办？
您可以
1) 不做。或者，
2) 在 Google 上搜索一些基于 JavaScript 的解决方案。
如果您真的走投无路，可以使用 Flash 或 JavaScript（以某种方式，但不是我所知的任何方式）。
我无法在 Chrome 11 或 Safari 5 Mac 上复制。
我之前用过下面链接中的插件，效果还不错。虽然不是Chris上面使用的那个方法，但它是一个相当不错的基于JS的插件。
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Sul
Chris，又一篇及时的文章！
关于它在其他非webkit浏览器中无法正常工作的说法，遗憾的是是真的——我最近花了很多时间试图找到一个解决方案，特别是在文本区域内使用。
有一些javascript/jquery解决方案，我发现其中最好的可能是JScrollPane。
至于文本区域的解决方案，我恐怕没有发现太多，但我决心尝试为它找到一个解决方案！
Chris，很棒的帖子，非常感谢！
有传言说，今年推出的OS X Lion应该会移除OS X中闪亮的蓝色液体滚动条。他们显然正在采用扁平的灰色，iOS风格。就像你说的，蓝色的“滑块”确实很抢眼。这将是一个受欢迎的改进。
你的演示在Chrome和Safari OSX中都无法正常工作。
那是因为我太蠢了。已修复。隐藏。
有没有什么迹象表明这将在其他浏览器中可用？即使是在IE中我也希望如此 :)
IE多年来一直支持滚动条样式
body {
scrollbar-face-color: #eee;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #ccc;
scrollbar-darkshadow-color: #fff;
scrollbar-shadow-color: #aaa;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #eee;
}
来源
http://www.computing.net/answers/webdevel/how-to-change-scroll-bar-look/740.html
不过只是颜色而已
可惜这种溢出方式在iOS上不起作用……有没有办法启用触摸事件？
我也有同样的问题，但发现@media查询可以提供帮助。
@only screen and (max-device-width:480px){
//在此处插入你的滚动条CSS//
}
对我来说有效。
请删除上一条评论。一定是抽风了或者什么。
或者Chrome使用了缓存版本。
嗨，Chris，感谢你的分享，我真的很喜欢它，并立即在我的项目中尝试了！
我希望-moz-能尽快出现，它可以让设计更加独特，我一直想要这个功能，我见过一些Flash滚动条，外观很棒，但格式很糟糕，哈哈！但CSS3非常令人兴奋……我希望能使用它。
我想指出一些事情……
众所周知，除非在body部分设置position: absolute;，否则它无法正常工作。如果我们设置right: 20px;，它只会对-webkit-浏览器看起来不错！例如，如果你在Mozilla中看到它，它看起来会不标准，并且用户会有点困惑……所以，我将right: 0;设置为使一切看起来正常。（如果你有更好的方法，请告诉我，我喜欢将其向左移动20px）
另一件事是关于.body，我们最好设置top和bottom为0，以便页面高度充满，并在以下位置替换为margin：
::-webkit-scrollbar-track { margin: 20px 0; }
是我还是你的示例中无法使用鼠标滚轮？
我的可以向下滚动，但不能向上滚动。
撤回！它可以向上滚动，但不能向下滚动。
如何修复webkit中的错误功能，而不是引入新的功能！
例如，area标签上的光标样式在webkit中从未被遵守过……
天哪……
这是坏掉的吗？我还没有看到任何问题。我还没有尝试过太多高级的东西。我认为最糟糕的部分是，关于不同部分接受哪些属性，没有明确说明和记录。
关于area错误，我还没有听说过，但这听起来像是错误。当然，最好的做法是创建一个简化的测试用例并作为错误提交（http://www.webkit.org/quality/reporting.html）如果它已经被报告过，提交你的测试用例仍然会有帮助，因为它会提供更多测试材料并表明对该问题的更多关注。
这里有一系列预制的滚动条。一个看起来像iTunes的滚动条（大理石），另一个基本上只是它的深色版本。下载链接已损坏，但我找到了实际的下载文件。大理石 黑色。
不要忘记Opera，多年来它也能够对滚动条进行一些调整。我在6年前的网站上使用过它。
scrollbar-face-color
scrollbar-highligh-color
scrollbar-shadow-color
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-track-color
scrollbar-darkshadow-color
不如Webkit的实现那么好，但如果你想玩玩的话。
是否可以在滚动条上放置图像？
我在这个网站http://bitteart.dk/上使用了Malihu的jquery插件来水平滚动客户的画廊。它在所有现代浏览器中运行良好（我没有在旧浏览器中检查）。
插件页面：http://manos.malihu.gr/jquery-custom-content-scroller
这是一种非常老的方法……
这是新的方法，也可以自定义自己的滚动条……
http://www.hesido.com/web.php?page=customscrollbar
哇，很棒的教程，没想到这么容易就能找到这里.. :)
这个网站怎么了？所有文本在我的所有浏览器中都无法阅读。请使用合适的字体，或者至少回退到可读的字体。
嗨，我可以说些什么：CSS3通常有一些真正好的东西，但通常都是一样的：只有webkit或“只有”mozilla，比如text-transform或这里的自定义滚动条。那么，我们应该如何处理它，等待两年让这个概念在每个浏览器中都可用…？无论如何，感谢你的提示，这对webkit浏览器来说是很好的东西。
你又一次让我惊叹于你的发现和教程..感谢你有一个很棒的网站，Chris
Webkit滚动条是我个人博客的一部分，从2010年中期开始（我之前移除过几次）。Chris，好文章。
无法在FF4上运行，示例也无法运行。
请看文章标题。
感谢你的提及，Chris！如果每个浏览器都支持这些东西就好了。我想，随着时间的推移，会实现的。
Kyle
哦，天哪，不。这可能是webkit中最糟糕的事情！每个应用程序中的滚动条都是一样的……如果你改变了它们的外观，普通人根本不知道它们是什么。
对可用性来说可能是灾难性的。
你对此有任何研究吗？
我明白你的意思。标准外观用户很熟悉，他们之前用过，所以他们知道如何再次使用它们。
但是这些自定义并没有完全重塑滚动条的概念。如果你做对了，它们仍然基本上看起来像滚动条。我敢打赌，大多数用户都是用某种鼠标动作来滚动的，在这种情况下，他们会看到这个自定义滚动条滚动并立即理解。
但这只是我的推测。
是的，我也在推测。我唯一依据的是，改变用户预期一直被证明是一件坏事（只从尼尔森的论文中读到过）。
滚动轮的问题在于，它根据光标的位置进行滚动。如果你不知道某些内容是可滚动的，那么非技术用户很容易对他们的鼠标/触控板感到恼火。
你觉得呢？
另外，抱歉，伙计，我不是故意要粗鲁！它看起来确实是一个非常酷的技巧，感谢分享！
我喜欢自定义滚动条，但是有没有办法解决浏览器窗口必须先被点击才能使用键盘上下键滚动页面这个问题？这有点像一个交易破坏者。
我认为这些非常酷，尤其是在 Forrst 上代码示例中的使用，对我来说，使用 Apple aqua 滚动条或类似的东西看起来很丑。
我必须同意 HN 上的大多数评论者（http://news.ycombinator.com/item?id=2513578）的观点，即自定义滚动条通常不是一个好主意。
正如“stuk”在那里所说：“允许自定义滚动条的问题在于，大多数人都会把它们弄得更糟。”
确实如此。
很棒的文章，我已经从事 HTML 和 CSS 的 Web 开发一年了，所以我对所有这些东西都比较陌生，但是能够获得像这样解释得这么清楚的信息感觉很好。
正如许多人所说，这只能在 WebKit 上运行是一个遗憾。
感谢 Chris 在这里提供的精彩内容！
这就是我过去 6 个月一直在寻找的东西，非常感谢……只有一个问题，如何将颜色从红色更改为深灰色？
感谢，高级用户
使用这个，“background-attachment: scroll”不起作用。这是因为“body”中的“overflow-y: scroll”……有什么解决办法吗？
我刚刚注意到，在 Mac 上的 Chrome 11.0.696.65 中，我只能对滚动条使用纯色。我不得不删除所有 rgba 调用才能使 Chrome 正常工作。否则，会在浏览器中形成一个试图渲染桌面背景的半透明孔……有点奇怪。
WebKit 中还有一个错误，即滚动条不会出现在 iframe 上：http://code.google.com/p/chromium/issues/detail?id=57292
如果你使用任何类型的滚动事件监听器，请注意，一旦你设置了滚动条的样式，它就会从正常的 WebKit DOM 中移除，并且不再可以通过 JavaScript（或 jQuery）选择——至少，到目前为止我发现是这样。
例如，在演示中注释掉 -webkit-scrollbar 样式并将滚动跟踪绑定到窗口：
$(window).scroll(function() {
console.log($(window).scrollTop(),$(window).height());
});
然后取消注释 -webkit-scrollbar 样式，你会发现滚动事件监听器不再触发。将绑定事件更改为“body”将触发滚动事件监听器，但 scrollTop 将固定为 0，高度将固定为可见窗口的高度。当我在事件中跟踪 $(“html”).scrollTop(); 或 $(“body”).scrollTop(); 时，我得到了类似的结果。
即使你可以在（Web 检查器中）看到滚动条附加到 html 标签上，但我还没有找到一个有效的选择器来重新捕获这些值。我甚至尝试选择 $(“::-webkit-scrollbar-track-piece”) 对象，但可惜，不行。
嗨，这不是每个人都在寻找的东西吗？它在所有浏览器中都能正常工作吗？该网站是法语的，这意味着我无法阅读它，但滚动条对于这么少的代码来说工作得非常好，而且我还没有使用它，所以我不知道它的缺点是什么……有人愿意看看吗？
http://carotut.voila.net/tutoriel/scrollbar_en_images/index.htm
这就是链接！请回复，因为在有人回答我上面一个或多个问题之前，我不会使用它。
简洁明了的解决方案，谢谢
在 Firefox 中不起作用
参见帖子的标题。
在 Firefox 中不起作用
超级棒的帖子！#谢谢
是否可以将滚动条覆盖在内容上？所需的效果是修复某些页面不需要滚动条时的“偏移”问题。如果我们能让滚动条位于“内容”（在我的例子中实际上只是一个空白的边距）的顶部而不是将站点推到左侧，那就太好了。
http://aokp.co 是一个很好的例子。
嗨，朋友们，
如果我使用这段代码
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
它会应用于所有滚动条，如何将其应用于特定的 div？
嘿，不错的教程 :-)
但我有一个问题：在你的示例中（带红色滚动滑块），你是如何实现从右边界的这个边距的？
我尝试在 -webkit-scrollbar-thumb 中使用它（使用
margin: 30px），还在 -webkit-scrollbar 和 body 中使用，但滚动条始终位于right: 0px。你能帮我吗？
只在 Chrome 中有效 :(
伙计，那么现在如何在 FF 和 IE 中创建自定义滚动条？
嘿，它工作得很好，也很酷 :)
如何减小滑块的高度？
嘿，它只在 Chrome 中有效 :( 那么如何在 Firefox 和 IE 中创建自定义滚动条呢？
它在 Firefox 中不起作用……
隐藏，因为这个问题已经讨论过了。（请参阅文章标题）。