Vue项目里加滚动条的样式
elementui的Table里添加y轴滚动条,默认样式太丑了,需要手动更改滚动条样式。
1、
// x轴滚动条
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 6px;
height: 8px;
background-color: rgba(32, 86, 131, 0.3);
}
//里面滑块
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #205683;
border-radius: 3px;
}
::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 3px;
background: rgba(0, 0, 0, 0.2);
}
这样会给滚动条修改样式和颜色。
2、直接隐藏滚动条滑轮,但是能滑动,将底颜色修改可以完全隐藏。
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}