在vue项目中修改全局滚动条样式
1、在base.css中加入该样式/*全局滚动条样式*/::-webkit-scrollbar {width: 5px;height: 14px;}::-webkit-scrollbar-thumb {/* background-color: #01c8dc;border-radius: 3px; */background-color: #b6b6b6;}/*全局滚动条样式结束*/如果想局部的话就
·
1、在base.css中加入该样式
/*全局滚动条样式*/
::-webkit-scrollbar {
width: 5px;
height: 14px;
}
::-webkit-scrollbar-thumb {
/* background-color: #01c8dc;
border-radius: 3px; */
background-color: #b6b6b6;
}
/*全局滚动条样式结束*/
如果想局部的话就在想要改变滚动条样式的vue文件中写上CSS样式即可。
2、表格限高需要修改的滚动条样式
/* el-table 滚动条样式 */
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
}
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.2);
}
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
}
.el-table__header-wrapper .has-gutter th:nth-last-child(2) {
border-right: 0;
}
/* el-table 滚动条样式结束 */
更多推荐
已为社区贡献7条内容
所有评论(0)