自定义滚动条样式

现在正在重构一个已经有的后管项目，今天看到这个滚动条实在是有点丑，想给换一下。实话说自己并不是一个很有经验的前端开发，所以也没搞过这种东西。以前记得在一个面试题中看到过，如何自定义一个滚动条样式，这次让我实实在在地遇到了，那么就开始搞一下，记录一下这个过程。

丑陋的滚动条

我找到了webkit的官网，看了一下相关说明，在这个说明中给了一段代码：

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

官方说明了，这个滚动条可以适用与textarea里面的滚动条，以及下拉选择框的滚动条，以及超出部分的滚动条。加上webkit前缀以后，webkit浏览器将会关闭内建的滚动条样式，使用定义的样式来渲染滚动条。

自己放在浏览器上面试了一下，看起来是可以的。

::-webkit-scrollbar {
    width: 5px;
    background-color:#9d9d9d;
}

Paste_Image.png

官方还给了更多的细节，比如滚动条的组成：
滚动条由轨迹(scrollbar-track)和按钮(scrollbar-button)组成，轨迹由滑块(scrollbar-thumb)和轨迹片(scrollbar-track-piece)组成。我在网上找了图和代码贴在下面，方便直观的认识滚动条。

Paste_Image.png

::-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中滚动条的组成，我也找了一张图：

Paste_Image.png

上面的代码在非edge版本的IE浏览器中起作用

想调节宽度怎么办？我看到微软的官网中，提供了一种折中的方法：

-ms-overflow-style: -ms-autohiding-scrollbar;

上面的代码意思是，当不滑动的时候，滚动条是隐藏的。
这样一来，IE看起来也不是那么丑了。

隐藏滚动条之前

隐藏滚动条之后

可是如果一定要一个滚动条，又要各种通吃的时候，可能还是会选择用js模拟吧？作为一个负责的前端开发，还是要看看js模拟究竟是什么原理。于是我随便找了一个js插件。看了看原理，发现其实很简单，看个简单的示意图。

Paste_Image.png

黑色是容器，蓝色是文字，容器设置overflow:hidden.文字设置绝对定位，根据鼠标滚轮设置top位置。右边红色是滚动条，自己随心所欲的画，然后根据蓝色内容的高度来设置位置，同时自己也绑定事件，来影响蓝色的top值。

这样看来，其实自定义滚动条也挺简单的。