elementUI滚动条组件el-scrollbar elementUI 中有⼀个隐藏组件<el-scrollbar>，⽤来修改滚动条的样式；
1.组件名称
<el-scrollbar></el-scrollbar>
  2.修改默认样式，最好在前⾯加上：class名/id名，⽤来区别
.page-component__scroll .el-scrollbar__wrap {
overflow-x: hidden;
}
  ⼀种情况⽤于⾼度固定：
<div >
<el-scrollbar >
<div >
.......
</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%;
element表格横向滚动条
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。