同时修改elmentUi横向和竖向的滚动条

饿了么提供了很多table组件,有时候横向滚动条和竖向滚动条原始的界面比较细不太好看,测试提出修改滚动条变粗

饿了么关于滚动条的原始样式是:

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: transparent;
}

直接在项目中修改公共elementUi样式类似于封装一个css文件,在main.js里面引入

.el-table__body-wrapper::-webkit-scrollbar{
   width: 12px !important;
  height: 12px;
   
 }

因为宽度会被初始化的样式覆盖,所以得加权重
这样就成功了,这样横向滚动条和竖向滚动条都宽高都设置好了,如果需要修改颜色等其他样式,同同样可以在上面的样式里面添加

你可能感兴趣的:(前端vue.jselement)