全局滚动条样式修改,elementUI table底部滚动条遮挡

/* 整个滚动条 */
::-webkit-scrollbar {
    width: 15px !important;
    height: 15px !important;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    border-radius: 32px;
}

// 如果想作用组件 可以 .xxx ::-webkit-scrollbar

修改elementui table 滚动区域样式,因修改全局滚动条样式会影响elementuitable滚动区域高度计算,所以需调整elementui 滚动条样式,不然会造成table滚动区域与滚动条高度不匹配的问题。

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

注意事项:

1、目前测试只修改当前组件的.el-scrollbar__wrap::-webkit-scrollbar 不生效;

2、注意宽高数量一致,否则会造成表格不对齐现象

建议修改滚动条样式的话,尽量是全局样式修改,样式也较整齐美观 ;

你可能感兴趣的:(css,elementui,前端,javascript,css)