vue+elementUI 中滚动条美化

问题描述

• 目前做的项目是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的绝对定位，所以这里就只显示好看的那一个啦。