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; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
}

/*滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(31, 29, 29, 0.3);
    background-color: rgb(192, 187, 187);
    border-radius: 3px;
}


/*滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(75, 68, 68, 0.3);
    background-color: rgb(240, 235, 235);
}

效果如下：

注意，伪元素就放在设置了overflow：auto的那层上即可。

参考资料：
scrollbar

来源：https://blog.csdn.net/qq_35536883/article/details/98883062