标签：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
