div盒子滚动条的设置和修改样式宽度和高度

宽度和高度"/>

div盒子滚动条的设置和修改样式宽度和高度

滚动条主要有由两部分组成，内滚动条和滚动轨道

设置滚动条的CSS样式需要以下三个属性：

1. target::-webkit-scrollbar {} //定义了滚动条整体的样式，如宽度和高度；
2. target::-webkit-scrollbar-thumb{} //定义了内滚动条部分，也就是图中的红色区域；
3. 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 ;
}

效果图如下：