scrollbar 相关样式属性

// 滚动条设置
::-webkit-scrollbar {
    width: 10px; /*y轴上的滚动条宽度*/
    height: 10px; /*x轴上滚动条高度*/
}
::-webkit-scrollbar-track {
    border-radius: 3px; /*滚动条的背景区域的圆角*/
    background-color: #fdf8f5; /*滚动条的背景颜色*/
}
::-webkit-scrollbar-thumb {
    border-radius: 3px; /*滚动条的圆角*/
    background-color: #ccc; /*滚动条的背景颜色*/
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(46, 86, 159);
}
::-webkit-scrollbar-thumb:active {
    background-color: rgb(46, 86, 159);
    cursor: pointer;
}

修改全局样式

css
::-webkit-scrollbar {width: 10px;height: 8px;}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 4px;}

局部修改样式

原理是修改 class 下的内容

css
.div-class::-webkit-scrollbar {width: 10px;height: 10px;}
/* 滚动条的滑块 */
.div-class ::-webkit-scrollbar-thumb {background-color: #a1a3a9;border-radius: 3px;}