CSS滚动条的一点心得

最近在学习滚动条的样式设计，遇到一些问题，碍于资料很少，很难得才找到问题所在的原因，记录一下，希望有一天当你遇到同样问题时，能得到一个解释。

/*滚动条样式*/
::-webkit-scrollbar              { /* 滚动条整体部分 */ }
::-webkit-scrollbar-button       { /* 滚动条两端的按钮 */ }
::-webkit-scrollbar-track        { /* 外层轨道 */ }
::-webkit-scrollbar-track-piece  { /* 内层轨道，滚动条中间部分（除去） */ }
::-webkit-scrollbar-thumb        { /* 控制器 */ }
::-webkit-scrollbar-corner       { /* 拐角 */ }
::-webkit-resizer                { /* 调整大小按钮 */ }

::-webkit-scrollbar 的解释是 “滚动条整体部分”，这个解释是不准确的，甚至有一定误导，大家有可能误以为 ::-webkit-scrollbar 是类似于 border 那样的缩写属性，
可以从整体上调整所有关于滚动条的属性，实际上它并不是所有关于滚动条的伪类的集合，它的作用在于控制 webkit 引擎是否使用缺省（默认）的滚动条样式，
对于要自定义滚动条的情况下，它是不可或缺的（required）的伪类，如果没有这个 ::-webkit-scrollbar ，那么其他关于滚动条的伪类都将不起作用。

/*当CSS中出现伪元素样式时，Webkit引擎将会关闭它的缺省滚动条样式输出，只使用CSS里提供的样式信息。 – Surfin’ Safari*/
/*这是针对缺省样式 (必须的)*/
/*width和height的默认值应该是13px*/
.scroll-content::-webkit-scrollbar{
    /* 高宽分别对应横竖滚动条的尺寸 */
    width: 13px;
    height: 13px;
}

有个小小的问题，如果使用 auto 作为值，是不是会与缺省时的宽高一致呢？答案是：会。