2023年6月20日发(作者：)

vue+elementUI中滚动条美化问题描述⽬前做的项⽬是vue+elementUI的PC端项⽬原⽣滚动条真的有点不能直视解决过程测试了easyScroll、vue-happy-scroll，发现前者不兼容IE，后者不能⾃适应窗⼝缩放打开elementUI官⽹，发现官⽹本⾝⽤了⼀个滚动条组件，然后检索相关的⽂章解决⽅案1、标签名称2、页⾯引⼊，这⾥⼀定要设置外层元素的宽、⾼；

.c-search-table⽤来设置外层元素的宽⾼，以及其他样式；.c-search-table{ width: 100%; height: calc(~"100% - 10px"); /*这⾥我⽤了计算属性*/}.beauty-Scroll ⽤来设置 组件的覆盖样式，这个样式⼀定要写到全局样式⾥⾯，这样才能⽣效，后期使⽤的时候，只需要再⽗级元素引⼊即可；.beauty-Scroll{ .el-scrollbar{ height: 100%; /*此处⼀定要设置⾼度，不然内层的计算属性不⽣效*/ } .el-scrollbar__wrap { width: calc(~"100% + 17px"); /*将垂直滚动条挤到可视区域之外*/ height: calc(~"100% + 17px"); /*将⽔平滚动条挤到可视区域之外*/ }}注：这⾥解释⼀下，因为滚动条是在el-scrollbar__wrap这个元素上的，所以把它设置⼤⼀点，就可以将这个元素上原始的滚动条遮挡掉了，⽽新⽣成的滚动条是相对于el-scrollbar的绝对定位，所以这⾥就只显⽰好看的那⼀个啦。

2023年6月20日发(作者：)

vue+elementUI中滚动条美化问题描述⽬前做的项⽬是vue+elementUI的PC端项⽬原⽣滚动条真的有点不能直视解决过程测试了easyScroll、vue-happy-scroll，发现前者不兼容IE，后者不能⾃适应窗⼝缩放打开elementUI官⽹，发现官⽹本⾝⽤了⼀个滚动条组件，然后检索相关的⽂章解决⽅案1、标签名称2、页⾯引⼊，这⾥⼀定要设置外层元素的宽、⾼；

.c-search-table⽤来设置外层元素的宽⾼，以及其他样式；.c-search-table{ width: 100%; height: calc(~"100% - 10px"); /*这⾥我⽤了计算属性*/}.beauty-Scroll ⽤来设置 组件的覆盖样式，这个样式⼀定要写到全局样式⾥⾯，这样才能⽣效，后期使⽤的时候，只需要再⽗级元素引⼊即可；.beauty-Scroll{ .el-scrollbar{ height: 100%; /*此处⼀定要设置⾼度，不然内层的计算属性不⽣效*/ } .el-scrollbar__wrap { width: calc(~"100% + 17px"); /*将垂直滚动条挤到可视区域之外*/ height: calc(~"100% + 17px"); /*将⽔平滚动条挤到可视区域之外*/ }}注：这⾥解释⼀下，因为滚动条是在el-scrollbar__wrap这个元素上的，所以把它设置⼤⼀点，就可以将这个元素上原始的滚动条遮挡掉了，⽽新⽣成的滚动条是相对于el-scrollbar的绝对定位，所以这⾥就只显⽰好看的那⼀个啦。