【转载】div 滚动条的设置和修改样式宽度和高度

转自：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 ;
}