element-ui是提供了el-scrollbar组件的，但是在文档中没有介绍它的使用方法。使用它不复杂，但是还是有几个注意点。
el-scrollbar本身没有height样式。我觉得这个组件应该是不知道它需要多高。如在一个DIV中，可能这个DIV是100PX高度，那它的hieght就是100px；如果是包含在el-main中，el-main的高度是会根据不同的显示器而高度也不相同。所以，它的高度应该是100%；随父元素的高度，还有一种可能，父元素是display: flex。在样式表中增加如下样式，根据不同的父元素选择不一样的样式：
.default-scrollbar {
width: 100%;
height: 100%;
}
.flex-scrollbar {
width: auto;
height: auto;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
el-scrollbar的内一层元素el-scrollbar__wrap的样式是overflow: scroll；这样就造成，x方向会显示一个横向滚动条。
横向滚动条
想要去掉它，el-scrollbar有个属性“wrap-class”，可以用这个属性增加一个样式。我们只是要去掉这个横向滚动条。
.el-scrollbar__wrap.default-scrollbar__wrap {
overflow-x: auto;
}
以下是el-scrollbar接受的属性：
props: {
native: Boolean,
wrapStyle: {},
wrapClass: {},
viewClass: {},
viewStyle: {},
noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
tag: {
type: String,
default: 'div'
}
}
可以根据属性再做一些定制
我再加了一个padding: 20px的view-class，这样，在el-main中，使得滚动条贴着右边，而不是默认的被el-main压进内部20px。又要使内容默认填充20px。把el-main的样式padding:０，再用padding20的view填充回去。换掉el-main本身浏览器的滚动条。
.el-scrollbar__view.p20-scrollbar__view {
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
最终样式表：
.el-main {
width: 100%;
height: 100%;
padding: 0;
}
.el-main.default {
height: auto;
padding: 20px;
}
.default-scrollbar {
width: 100%;
height: 100%;
}
.flex-scrollbar {
width: auto;
height: auto;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.el-scrollbar__wrap.default-scrollbar__wrap {
overflow-x: auto;
}
.el-scrollbar__view.default-scrollbar__view {}
.el-scrollbar__view.p20-scrollbar__view {
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
使用el-scrollbar例子
<template>
<el-container>
<el-aside :width="asideWidth">
<el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="default-scrollbar__view">
<div class="demo">
aside
</div>
</el-scrollbar>
</el-aside>
<el-container>
<el-header class="clear">
<div class="collapse-btn" @click.prevent="changeCollapse">
<i class="fas fa-bars" :class="{ rotate90: isCollapse }"></i>
</div>
</el-header>
<el-main>
<el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="p20-scrollbar__view">
<div class="main">
main
</div>
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</template>
<style scoped>
.collapse-btn {
float: left;
font-size: 24px;
cursor: pointer;
}
.rotate90 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.demo {
width: 100px;
height: 1024px;
background: #0f0;
}
.main {
width: 300px;
height: 1024px;
background: #00f;
}
</style>
最终效果图
aside的滚动条
main的滚动条
图中是chrome浏览器的展示效果。main的滚动条是已经到滚动到底的。
