滚动条如何自定义样式

浏览器默认的滚动条可能会不满足pm的需求，所以我们可以自定义浏览器的滚动条样式。

• Thumb: 滚动条本身，
• Track: 滚动条下面的轨道
• Buttons: 滚动条轨道的两端。
• Corner: 两个滚动条的交点
• Resizer: 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。

所以在代码中，可以先对滚动条整体做样式限定，后再对里面具体的元素进行样式限定。如下：

::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 4px;
   height: 4px;
}
::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background-color: rgba(0,0,0,.2);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

在::-webkit-scrollbar 中，width是用来设置垂直方向的滚动条宽度，height是用来设置水平方向的滚动条宽度