问题描述
- 目前做的项目是vue+elementUI的PC端项目
- 原生滚动条真的有点不能直视
解决过程
- 测试了easyScroll、vue-happy-scroll，发现前者不兼容IE，后者不能自适应窗口缩放
- 打开elementUI官网，发现官网本身用了一个滚动条组件，然后检索相关的文章
解决方案
1、标签名称
<el-scrollbar></el-scrollbar>
2、页面引入，这里一定要设置外层元素的宽、高；
<div class="c-content">
<div class="c-search-table beauty-Scroll">
<el-scrollbar>
<!-- 需要滚动的内容 -->
</el-scrollbar>
</div>
</div>
.c-search-table用来设置外层元素的宽高，以及其他样式；
.c-search-table{
width: 100%;
height: calc(~"100% - 10px"); /*这里我用了计算属性*/
}
.beauty-Scroll 用来设置 <el-scrollbar> 组件的覆盖样式，这个样式一定要写到全局样式里面，这样才能生效，后期使用的时候，只需要再父级元素引入即可；
.beauty-Scroll{
.el-scrollbar{
height: 100%; /*此处一定要设置高度，不然内层的计算属性不生效*/
}
.el-scrollbar__wrap {
width: calc(~"100% + 17px"); /*将垂直滚动条挤到可视区域之外*/
height: calc(~"100% + 17px"); /*将水平滚动条挤到可视区域之外*/
}
}
注：
这里解释一下，因为滚动条是在el-scrollbar__wrap这个元素上的，
所以把它设置大一点，就可以将这个元素上原始的滚动条遮挡掉了，
而新生成的滚动条是相对于el-scrollbar的绝对定位，所以这里就只显示好看的那一个啦。
