关于滚动条的选择器

CSS3允许我们自定义滚动条的样式，我么先来认识一下这些伪元素选择器

::-webkit-scrollbar  一整个滚动条
::-webkit-scrollbar-button  滚动条上两个按钮（上下箭头）
::-webkit-scrollbar-thumb  滚动条上面的滑块
::-webkit-scrollbar-track  滚动条的轨道
::-webkit-scrollbar-track-piece  滚动条上没有滑块的部分
::-webkit-scrollbar-corner  水平滚动条和竖直滚动条相交的部分
::-webkit-resizer  某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

::-webkit-scrollbar {
  width: 10px; /*竖直滚动条的宽度*/
  height: 10px; /*水平滚动条的高度*/
}

下面给出一个常用的滚动条的样式示例。

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: grey;
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: lightgrey;
}

完工！