elementUI 滚动条组件

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

1.组件名称

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

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

　　一种情况用于高度固定：

 

    
        

          ....... blabla.....
        
    
  

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

   

    	

    		
		      	
123
		    
    	
    	

    		
		      	
123
		    
    	
      
    

　　样式如下：

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

　　

转载于:https://www.cnblogs.com/dyy-dida/p/11161272.html