CSS 更改滚动条的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3203107/
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
Changing the scrollbars' style
提问by Aaron
Is possible to change scrollbars' style for all browsers? If it is, how?
是否可以更改所有浏览器的滚动条样式？如果是，如何？
回答by Pekka
It is possible in Internet Explorer using a number of non-standard scrollbar-*CSS properties. See this pagefor a handy generator tool.
在 Internet Explorer 中可以使用许多非标准scrollbar-*CSS 属性。请参阅此页面以获取方便的生成器工具。
Other than that, it is possible only using custom JavaScript-powered scrollbar solutions. The jScrollPane jQuery pluginlooks very nice and easy to install. Hereis an example page.
除此之外，只能使用自定义的 JavaScript 驱动的滚动条解决方案。该JScrollPane的jQuery插件看起来非常漂亮，易于安装。这是一个示例页面。
回答by RunnerRick
Styling and programming scrollbars are not addressed by standards at this time, but some vendors have extensions to address this problem in desktop web browsers. The jScrollPane jQuery plugin is an excellent choice if you want to use custom scrollbars.
目前标准还没有解决样式和编程滚动条的问题，但一些供应商有扩展来解决桌面 Web 浏览器中的这个问题。如果您想使用自定义滚动条，jScrollPane jQuery 插件是一个很好的选择。
Vendor Extensions
供应商扩展
Internet Explorer(starting with version 8) has extensions to CSS and the DOM allowing you to specify color only of the different parts of a scrollbar.
Internet Explorer（从版本 8 开始）对 CSS 和 DOM 进行了扩展，允许您仅指定滚动条不同部分的颜色。
An updated link to the Microsoft documentation is this: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. You'll want to just look at all the properties starting with "-ms-scrollbar".
Microsoft 文档的更新链接如下：http: //msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx。您只需查看以“-ms-scrollbar”开头的所有属性。
WebKit(e.g. Safari and Chrome) has a CSS pseudo-element for styling scrollbars which allows you to apply any CSS property to it. To learn more see this Surfin' Safari blog post: http://webkit.org/blog/363/styling-scrollbars/
WebKit（例如Safari 和Chrome）有一个CSS 伪元素用于样式化滚动条，它允许您将任何CSS 属性应用到它。要了解更多信息，请参阅 Surfin' Safari 博客文章：http: //webkit.org/blog/363/styling-scrollbars/
Example:
例子：
::-webkit-scrollbar
{
width: 13px;
height: 13px;
}
Mozilla(e.g. Firefox) and Operado not seem to have any support for styling scrollbars.
Mozilla（例如 Firefox）和Opera似乎不支持样式滚动条。
Custom Scrollbars
自定义滚动条
Regarding the jScrollPanejQuery plugin is an excellent choice, if you want custom scrollbars. It is pretty comprehensive in addressing expected functionality of scrollbars and keeps you from rolling your own.
关于jScrollPanejQuery 插件是一个很好的选择，如果你想要自定义滚动条。它在解决滚动条的预期功能方面非常全面，并防止您滚动自己的。
It is important to realize jScrollPane replaces the browser's native scrollbars, and you might not find the "touch and responsiveness" of those custom scrollbars to be as good as "the real thing." But then again, it might be good enough if you value form over function.
意识到 jScrollPane 取代了浏览器的原生滚动条很重要，您可能不会发现这些自定义滚动条的“触摸和响应能力”与“真实的东西”一样好。但话又说回来，如果你重视形式而不是功能，这可能就足够了。
This is a more recent link to the jScrollPane documentation: http://jscrollpane.kelvinluck.com/
这是 jScrollPane 文档的最新链接：http: //jscrollpane.kelvinluck.com/
回答by bobince
Nope. IE allows you to set colours for some constituent parts of the scrollbar. Opera allows a few but not all of those styles.
不。IE 允许您为滚动条的某些组成部分设置颜色。Opera 允许一些但不是所有这些风格。
Scrollbar colour styling is of increasing irrelevance as UIs move towards complex image-based scrollbar theming. In IE, setting any of the colours reverts the rendering back to a Windows 2000-style simple-3D scrollbar instead of any swishy user theme. Windows Vista/7 (Aero) users probably won't thank you for that.
随着 UI 转向复杂的基于图像的滚动条主题，滚动条颜色样式变得越来越无关紧要。在 IE 中，设置任何颜色都会将渲染恢复为 Windows 2000 风格的简单 3D 滚动条，而不是任何时髦的用户主题。Windows Vista/7 (Aero) 用户可能不会为此感谢您。
You can of course make your own ersatz-scrollbars out of <div>s and style them how you like. But the result almost always behaves worse than real scrollbars, since you're trying to replicate a complex UI element whose expected behaviour is different for each OS. You can spend a lot of time reproducing paging behaviour, keyboard up/down and the mouse wheel, but it'll never quitefeel as smooth a real OS scrollbar.
你当然可以用<div>s制作你自己的 ersatz-scrollbars并按照你喜欢的方式设计它们。但结果几乎总是比真正的滚动条表现得更糟，因为您试图复制一个复杂的 UI 元素，其预期行为对于每个操作系统都不同。你可以花很多的时间重现分页行为，键盘的上/下和鼠标滚轮，但它永远不会很感觉平滑真正的OS滚动条。
回答by Jonny Haynes
You can style scrollbars for all browsers with a little bit of Javascript. But at present time there is no way to style them using just CSS alone as a cross-browser solution.
您可以使用一点 Javascript 为所有浏览器设置滚动条的样式。但是目前还没有办法单独使用 CSS 作为跨浏览器解决方案来设置它们的样式。
