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的滾動條是已經到滾動到底的。
