elementUI 滚动条组件 <el-scrollbar>

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

1.组件名称

<el-scrollbar></el-scrollbar>

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

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

　　一种情况用于高度固定：

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

　　一种情况用于高度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;
        }