css自定义滚动条_使用CSS / jQuery自定义浏览器滚动条

Windows，OS X和Linux在滚动条上有自己的样式，如下面的屏幕快照所示。 反过来，这可能会导致不希望的结果和设计的一致性。

在本文中，我们将介绍如何自定义滚动条外观，以便它可以与您的总体设计完美融合。

Internet Explorer 5.5

回到IE 5.5，Internet Explorer团队引入了一组非标准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;	
}

甚至有一个软件可以生成这些样式规则。 但是，这些属性不能完全控制滚动条，而只能完全控制颜色。 此外，自Internet Explorer 6起，这些属性已被删除，因此今天不再适用。

使用jQuery插件

有许多jQuery插件可自定义滚动条。 真正流行的一种是jScrollPane 。 jScrollPane将滚动条转换为HTML结构，因此可以通过CSS进行完全自定义，并且还具有更好的跨浏览器支持。 此外，通过提供的API，您还可以设置某些鼠标事件的滚动条行为。

唯一的缺点是它依赖于许多其他JavaScript库：jQuery， Mousewheel 。 从技术上讲，必须同时加载很多JavaScript可能会影响您的网站性能。 但是目前，如果您担心浏览器支持，则使用jQuery是唯一的最佳选择。

• 小滚动条
• 漂亮的滚动条
• 纳米滚动条

Webkit CSS属性

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

通过这些选择器，您可以在支持Webkit的浏览器（例如Google Chrome，Safari和Opera）中自定义滚动条样式。 这是实现的基本示例。

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #aaa;
}

• 观看演示
• 下载源

例子

翻译自: https://www.hongkiat.com/blog/css-scroll-bar/