转自：https://blog.csdn.net/weixin_46353030/article/details/116059762
https://www.jianshu.com/p/f7cf20e24ae6
滚动条主要有由两部分组成，内滚动条和滚动轨道
设置滚动条的CSS样式需要以下三个属性：
target::-webkit-scrollbar {} //定义了滚动条整体的样式，如宽度和高度；
target::-webkit-scrollbar-thumb{} //定义了内滚动条部分，也就是图中的红色区域；
target::-webkit-scrollbar-track{} //定义了滚动条轨道，也就是图中的蓝色区域；
现在需求如下：
给div设置一个宽度和高度均为4px，内滚动条半径也为4px且颜色为红色，滚动轨道颜色为蓝色的滚动条；
代码如下：
/* 修改滚动条样式 .title_state为div盒子*/
.title_state::-webkit-scrollbar {
width: 4px;
height: 4px;
border-radius: 4px;
overflow-y: scroll;
}
.title_state::-webkit-scrollbar-thumb {
background: red;
}
.title_state::-webkit-scrollbar-track {
background: blue ;
}
最后，总结 一个滚动条的组成部分(通常设置前三个即可)：
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块（即滚动条滑块），能向上向下移动（或横向滚动条可往左往右移动）
- ::-webkit-scrollbar-track 滚动条的轨道（对应上图滚动条凹槽，里面装有Thumb，即滚动条滑块）
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
- ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
ChipWhisperer说道： 
Google Chrome 
Windows 10
LuckyBandit说道： 
DealerShadow说道： 
AceSorcerer说道： 
PokerPhantom说道：