CSS-Learning | CSS自定义滚动条样式

滚动条的CSS属性集是从Internet Explorer 5.5开始的一个专有风格hook，这让设计师创建浏览器的滚动条的自定义主题。目前,它暴露在使用Webkit渲染引擎(和Blink)，厂商前缀为Webkit的浏览器。

-webkit-scrollbar家族的属性由七种不同的伪元素组成的一个完整的滚动条UI元素：

1. ::-webkit-scrollbar，滚动条的背景。它通常是由其他元素覆盖。
2. ::-webkit-scrollbar-button，滚动条方向的按钮。
3. ::-webkit-scrollbar-track，进度条下面的空白区域。
4. ::-webkit-scrollbar-track-piece，内层轨道，它会覆盖第三个属性的样式。
5. ::-webkit-scrollbar-thumb，滚动条里面可以拖动的那部分。
6. ::-webkit-scrollbar-corner，边角，两个滚动条交汇处。
7. ::-webkit-resizer，两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

::-webkit-scrollbar {
   
   
    width: 10px; /*对垂直流动条有效*/