当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美，那么我们可以通过css伪类来实现对滚动条的自定义。
首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。
1.滚动条的css样式主要有三部分组成 ::-webkit-scrollbar 定义了滚动条整体的样式::-webkit-scrollbar-thumb 滑块部分；::-webkit-scrollbar-thumb 轨道部分；如果是整个页面的滚动条风格是一致的，直接改全局的滚动条样式也可以有效果 //滚动条的宽度::-webkit-scrollbar { width: 6px; height: 6px; background-color: green; border-radius: 4px;}//滚动条的滑块::-webkit-scrollbar-thumb { background-color: red; border-radius: 4px;} 2. element-ui中的表格el-table滚动条样式修改
前面加一个表格的类名
// 滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px; }