使用 element-ui 隐藏组件 el-scrollbar 美化滚动条

嘻嘻，抽空出个教程，这个我也是看别人的文章学来的哈哈

拿element-ui官网的这个container布局容器做例子吧，当我们展开所有条目的时候，右侧就会出现浏览器自带的滚动条，而且这个滚动条还会把左边的上下箭头挤过去…说白了就是会占间距，虽然还看得过去…但是给别人的感觉就很low

然后我们再把鼠标移动到官网左侧的列表栏，就能看到element-ui自带的滚动条啦，很好看吧

那么我们怎样才能用上这个滚动条呢，教程开始！

element-ui是有这个组件的，

<el-scrollbar></el-scrollbar>

虽然官网文档没有说明，但是我们能从上面这张图看出来，也能在源码里找到

1.我们把上面的实例代码复制到idea中（我这个稍有改动），在aside和menu之间插入一个el-scrollbar标签，并给它一个class

2.然后我们在style里添加下面的样式，这里注意要把style里的scoped属性（作用是让该style标签里的样式只作用在当前组件中）删掉，后面会说原因

<style >
  .page-scroll {
    height: 100%;
  }

  .page-scroll .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>

3.然后运行项目看效果，简约好看，纵享丝滑

这样就能让我们的网页拥有统一风格的优雅滚动条啦

说一下上面提到的删掉scoped，如果不删，效果是这样子的

底部就会出现一个很丑的横向滚动条，我们要用overflow-x: hidden将其隐藏，这个横向滚动条是受.el-scrollbar__wrap 控制的，可是 .el-scrollbar__wrap 是作用在全局的，所以我们要把scoped属性删除，让这个style样式作用在全局，这样就ok啦！