现在正在重构一个已经有的后管项目，今天看到这个滚动条实在是有点丑，想给换一下。实话说自己并不是一个很有经验的前端开发，所以也没搞过这种东西。以前记得在一个面试题中看到过，如何自定义一个滚动条样式，这次让我实实在在地遇到了，那么就开始搞一下，记录一下这个过程。
我找到了webkit的官网，看了一下相关说明，在这个说明中给了一段代码：
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
官方说明了，这个滚动条可以适用与textarea里面的滚动条，以及下拉选择框的滚动条，以及超出部分的滚动条。加上webkit前缀以后，webkit浏览器将会关闭内建的滚动条样式，使用定义的样式来渲染滚动条。
自己放在浏览器上面试了一下，看起来是可以的。
::-webkit-scrollbar {
width: 5px;
background-color:#9d9d9d;
}
官方还给了更多的细节，比如滚动条的组成：
滚动条由轨迹(scrollbar-track)和按钮(scrollbar-button)组成，轨迹由滑块(scrollbar-thumb)和轨迹片(scrollbar-track-piece)组成。我在网上找了图和代码贴在下面，方便直观的认识滚动条。
::-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 */ }
webkit还给了一些伪类用于定义更丰富的样式，但是目前我没想到什么应用场景，所以我也不详细尝试了，在这里webkit的网址贴出来(网址在这里)，如果有人能看到这篇文章，希望可以交流一下伪类的应用场景。
之前的都是在webkit内核的浏览器上，IE不吃这一套，所以我又去找了一下IE的相关信息。网上流传的这些代码似乎暗示着：在IE里面，似乎只能调解颜色，不能调节宽度。而在现在最舒服的IE edge浏览器中，这些代码是不起作用的
body{
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
同样的，为了说明IE中滚动条的组成，我也找了一张图：
想调节宽度怎么办？我看到微软的官网中，提供了一种折中的方法：
-ms-overflow-style: -ms-autohiding-scrollbar;
上面的代码意思是，当不滑动的时候，滚动条是隐藏的。
这样一来，IE看起来也不是那么丑了。
可是如果一定要一个滚动条，又要各种通吃的时候，可能还是会选择用js模拟吧？作为一个负责的前端开发，还是要看看js模拟究竟是什么原理。于是我随便找了一个js插件。看了看原理，发现其实很简单，看个简单的示意图。
黑色是容器，蓝色是文字，容器设置overflow:hidden.文字设置绝对定位，根据鼠标滚轮设置top位置。右边红色是滚动条，自己随心所欲的画，然后根据蓝色内容的高度来设置位置，同时自己也绑定事件，来影响蓝色的top值。
这样看来，其实自定义滚动条也挺简单的。
