这是我参与更文挑战的第15天，活动详情查看： 更文挑战
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。
以下正文：
问题描述
浏览器默认的滚动条样式太丑了，而且不同的浏览器下滚动条的样式也不一样，为了美观和统一，必须修改滚动条的样式。
有人问，为什么不自己写一个滚动条？
其一，自己写的滚动条效率和兼容性比不上浏览器默认滚动条。
其二，自己写太麻烦了吧，能用默认的为什么不用呢 0.o
问题分析
既然要修改默认滚动条的样式，就需要了解滚动条的样式都有哪些属性可以修改，以及这些属性分别对应了滚动条的哪些部位？
下面有一张图可以很清楚的看到它们的对应关系：
属性描述：
::-webkit-scrollbar //滚动条整体部分
::-webkit-scrollbar-button //滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner //边角
::-webkit-resizer ///定义右下角拖动块的样式
解决方案
于是对于chrome，我们可以这样修改滚动条样式：
/*定义整个滚动条高宽及背景：高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width:10px;
background-color:#F5F5F5;
}
/*定义滚动条轨道：内阴影+圆角*/
::-webkit-scrollbar-track
{
background-color:#F5F5F5;
}
/*定义滑块：内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius:10px;
background-color:#555;
}
一般我们这样设置这几个主要属性就OK了，但是如果你想更详细的css属性，也有：
:horizontal //水平方向的滚动条
:vertical //垂直 方向的滚动条
:decrement //应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment //decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start //伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end //类似于start伪类，标识对象是否放到滑块的后面。
:double-button //该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button //类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button //用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
:corner-present //用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive //用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
用法如下：
::-webkit-scrollbar-track-piece:start {}
::-webkit-scrollbar-thumb:window-inactive {}
::-webkit-scrollbar-button:horizontal:decrement:hover {}
兼容性
IE
对于IE，目前只找到修改滚动条各种属性的颜色，未找到修改样式的地方。
具体可修改的颜色如下：
有个表格看的清楚：
代码：
.ie-div {
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
scrollbar-face-color: #333; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
}
修改后的IE滚动条样式如下：
Firefox
火狐64位目前只提供了部分自定义滚动条的属性：
scrollbar-width：该属性可取值：
scrollbar-width: auto; // 默认值
scrollbar-width: thin; // 比默认滚动条窄
scrollbar-width: none; // 不显示滚动条，但是仍可以滚动
下面是 thin 的样式（图一默认，图二thin）：
scrollbar-color：其可填写的值有：
scrollbar-color: auto; // 默认值
scrollbar-color: dark;
scrollbar-color: light;
scrollbar-color: red green; // 第一个滚轮颜色，第二个滚动条背景色
其中
dark和light并没有实现。
示例代码：
#style-0 {
scrollbar-width: thin;
scrollbar-color: #ccc #eee;
}
使用插件或者自己DIY
比较好用的插件：
其它
我看到还有更骚的操作是在界面上套一层div，然后在滚动条的地方挖孔，只显示一部分滚动条出来，然后显示的一部分滚动条就是类似自定义的样式。。。
总结
如果只是修改样式的，IE算是没辙了，但是firefox还有救。
我的折中方式是，把chrome的样式设置和firefox一样。
代码：
/**
描述：自定义浏览器滚动条样式。
示例：如 my-div 需要使用自定义滚动条，直接如下写法。
.my-div {
overflow: auto;
@import '../../commons/css/custom_scroll.less';
}
注意：元素需要使用 `overflow:hidden ` 属性。
兼容性：兼容chrome和firefox，不兼容IE
*/
&::-webkit-scrollbar {
width: 6px;
background-color: #eee;
}
&::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
&:hover {
background-color: #a8a8a8;
}
&:active {
background-color: #787878;
}
}
& {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #eee;
}
如此，chrome和firefox可算长得一样了。
参考链接
提问与交流
你在前端项目中都是如何统一滚动条样式的？欢迎留言和我交流吧！
最近热门文章：
以上，如果你看了觉得对你有所帮助，就点个赞叭，这样Daotin也有更新下去的动力，跪谢各位父老乡亲啦~~~ 听说喜欢点赞的人，一个月内都会有好运降临哦 ~~
