- /* 整个滚动条 */
- ::-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、注意宽高数量一致,否则会造成表格不对齐现象
建议修改滚动条样式的话,尽量是全局样式修改,样式也较整齐美观 ;