element-ui 的隐藏滚动组件el-scrollbar

更新日期: 2019-05-29阅读: 4.8k标签: 组件

为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库。我考虑的,首先项目用的框架vue,然后用的组件库是Element,Element官网也有很多滚动,而且像是Select组件的下拉框也是有滚动的,所以就不用想选择什么了,简简单单的就用Element自己的scrollbar吧,也不用再引入什么别的包或者文件之类的。

看Element的官网是不可能发现Scrollbar这个组件的。但是在源码中是有的。所以我们可以直接使用:

<el-scrollbar></el-scrollbar>

但是我们需要微调一下样式,两种情况的演示代码如下:


已知内容高度

<div style='height:800px'>
<el-scrollbar class='page-component__scroll'></el-scrollbar>
<div>
<style>
.page-component__scroll{
    height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
    overflow-x: auto;
}
<style>

高度由内容撑开
html,body{ height:100% overflow:hidden; /*有效防止在页面进行手动刷新时显示内置滚动条*/ } .page-component__scroll{ height: 100%; } .page-component__scroll .el-scrollbar__wrap { overflow-x: auto; }