CSS - 自定义滚动条

网页自带的滚动条往往很难看，这时候就可以考虑用 css 自定义一个滚动条了

警告

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它
（但如果是Electron的话还是可以的哦）

伪类选择器

CSS 属性	描述
::-webkit-scrollbar	整个滚动条
::-webkit-scrollbar-thumb	滚动条滑块
::-webkit-scrollbar-track	滚动条轨道
::-webkit-scrollbar-button	滚动条按钮
::-webkit-scrollbar-track-piece	滚动条轨道的中间部分
::-webkit-scrollbar-corner	滚动条交汇处
::-webkit-resizer	滚动条交汇处的小方块

示例

/* 设置滚动条的宽度 */
::-webkit-scrollbar {
  width: 10px;
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* 设置滚动条滑块在悬停状态下的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}