利用 ElementUI 的 <el-scrollbar></el-scrollbar> 解决div高度百分比时滚动条不生效的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-scrollbar></el-scrollbar> 这个组件在 ElementUI 的官方组件文档里面是没有提到的(百度发现的),也可以直接使用的,解决了困扰我很多天的问题,简单写了个例子,留着以后可能还用得着:
html代码:(我的是vue项目)
<div class="div1">
<div class="test1">
这里是test1 div的内容(此div可有可无)这里不一定是div,也可以是其他的标签内容
</div>
<el-scrollbar class='test_scroll'>
<div class="test2">
这里是test2 div的内容 高度我设置了2000px,目的是为了撑开容器,以展示滚动条,这里不一定是div,也可以是其他的标签内容
<br>
把需要使用滚动条的内容写在 <el-scrollbar></el-scrollbar>里面就可以了
</div>
</el-scrollbar>
</div>
style:
.div1{
height:100%;/*高度可定死,也可以是百分比*/
width: 1000px;/*宽度不影响,我随便写的*/
}
.test1{
height: 100px;
background: #C0C4CC;
}
.test2{
height: 2000px;
}
.test_scroll {
height: 100%;
}
/deep/.test_scroll .el-scrollbar__wrap {
/*根据需求设置overflow*/
overflow: auto;
}
我试了一下,<el-scrollbar></el-scrollbar>不能用在Element的布局容器(el-row)内,暂时还不知道为什么,也可能是我写的方式不对,以后再研究研究。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)