码迷,mamicode.com
首页 > 其他好文 > 详细

elementUI 滚动条组件 <el-scrollbar>

时间:2019-07-10 01:20:02      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:box   最好   border   div   scroll   dde   bar   highlight   one   

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

  

elementUI 滚动条组件 <el-scrollbar>

标签:box   最好   border   div   scroll   dde   bar   highlight   one   

原文地址:https://www.cnblogs.com/dyy-dida/p/11161272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!