一.单独修改element-ui中的表格el-table的滚动条样式(两种方法)
.el-table__body-wrapper{
background-color: #ddd;
}
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 8px; // 横向滚动条
height: 8px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 3px;
}
二.保持整个页面的滚动条的风格是一致(直接改全局的滚动条样式)
//滚动条的宽度
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #e4e4e4;
border-radius: 3px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #a1a3a9;
border-radius: 3px;
}
**三.页面内某一组件滚动条样式美化 **
.scroll-bar {
&::-webkit-scrollbar {
width: 4px; /* 纵向滚动条*/
height: 5px; /* 横向滚动条 */
background-color:transparent;
}
/*定义滚动条轨道 内阴影*/
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
}
/*定义滑块 内阴影*/
&::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
background-color: #296396;
border-radius: 4px;
}
}
scroll-bar是需要滚动条组件的元素,类名自定义
本文转载自: https://blog.csdn.net/weixin_53474595/article/details/129060430
版权归原作者 小储今天暴富了 所有, 如有侵权,请联系我们删除。
版权归原作者 小储今天暴富了 所有, 如有侵权,请联系我们删除。