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;
    }