html横向滚动条样式el-table滚动条样式修改
CSS3⾃定义滚动条样式 -webkit-scrollbar
当内容超出容器时，容器会出现滚动条，其⾃带的滚动条有时⽆法满⾜我们审美，那么我们可以通过css伪类来实现对滚动条的⾃定义。
⾸先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，⼀般来说滑块的颜⾊⽐轨道的颜⾊深。
1.滚动条的css样式主要有三部分组成
1. ::-webkit-scrollbar 定义了滚动条整体的样式
2. ::-webkit-scrollbar-thumb 滑块部分；
3. ::-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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。