要修改的div的class名为scrollBox,样式如下:
.scrollBox::-webkit-scrollbar {
/*滚动条整体样式*/
width : 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.scrollBox::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 5px;
background-color: #033b89;
}
.scrollBox::-webkit-scrollbar-track{
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : transparent;
border-radius: 10px;
}
.scrollBox::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
-webkit-border-radius: 6px;
}
修改elementUI的table的滚动条样式如下:
/* 滚动条的宽度 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 6px; /* 横向滚动条 */
height: 7px; /* 纵向滚动条 必写 */
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track-piece {
background: #fff; // 滚动条背景颜色
}
/* 滚动条的滑块 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background: #18255d;
border-radius: 3.5px;
}