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起,这些属性已被删除,因此今天不再适用。
![](https://i-blog.csdnimg.cn/blog_migrate/6614788dcfa91b429099595351243b31.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6614788dcfa91b429099595351243b31.png)
使用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://i-blog.csdnimg.cn/blog_migrate/2625e10c153f686fd3773276a9f6ae35.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2625e10c153f686fd3773276a9f6ae35.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a5a1539eed431b281e24607d2045c5f3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a5a1539eed431b281e24607d2045c5f3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0d2faddd120157b864cbefadbcb5c45f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0d2faddd120157b864cbefadbcb5c45f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/68bf064baff69f79741a02e38a9d6610.png)
![](https://i-blog.csdnimg.cn/blog_migrate/68bf064baff69f79741a02e38a9d6610.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1c383411dfec86e7d896ecfef26c5c2c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1c383411dfec86e7d896ecfef26c5c2c.png)