element-ui 隐藏组件 滚动条组件 ＜el-scrollbar＞

elementUI 中有一个隐藏组件<el-scrollbar>，用来修改滚动条的样式；

1.组件的名称是<el-scrollbar></el-scrollbar>

2.修改默认样式 ，最好在前面加上：class名/id名，用来区别

.page-component__scroll .el-scrollbar__wrap {overflow-x: hidden;}

3.一种情况用于高度固定：

<div style="height:600px;"><el-scrollbar style="height:100%"><div style="width:700px;height:700px;border:solid;" >....... blabla.....</div></el-scrollbar></div>

4.一种情况用于高度100%自适应：

<div id="app"><div class="left"><el-scrollbar class='page-component__scroll'><div class="box">123</div></el-scrollbar></div><div class="right"><el-scrollbar class='page-component__scroll'><div class="box">123</div></el-scrollbar></div></div>

样式如下：

html,body{height:100%;}#app{height:100%;overflow: hidden;}.left{width:200px;height:100%;background:#f00;float:left;}.right{width:300px;height:100%;background-color:#0f0; float:right;}.page-component__scroll{height:100%;}.box{height:900px;background-color:#000000;width:200px;color:#fff;}.left .page-component__scroll .el-scrollbar__wrap {overflow-x: hidden;}