浏览器默认的滚动条不太美观而且在ie下不能调整样式，在element-ui中有个隐藏的组件，在官网上是没有对应的api的，那就是<el-scrollbar>，这个组件的滚动条比原生的还是好看些的。
开始使用
<el-scrollbar>
// 包裹你的内容
</el-scrollbar>
这个组件还有一个属性值可以传递，可以用来修改样式加一些class的类名，但是一般情况下不会用的太多。
props: {
native: Boolean,
wrapStyle: {}, // 外层盒子的样式
wrapClass: {}, // 外层盒子的class
viewClass: {}, // 内层盒子的class
viewStyle: {}, // 内层盒子的样式
noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
tag: {
type: String,
default: 'div'
}
}
el-scrollbar将会作为你容器的最外层，也是滚动条的容器；
可以给el-scrollbar加上ref以及class来达到自己想要的结果。
特别需要注意的是：在el-scrollbar上定义maxHeight和maxWidth是不生效的，没有办法达到预期的一个效果
滚动到指定的位置
可以使用如下代码
this.$refs['scroll'].wrap.scrollTop = 0 //想滚到哪个高度，就写多少
或者
this.$refs.scroll.wrap.scrollTop = 0 //想滚到哪个高度，就写多少
注意 .warp必须要加，否则不生效。
例子：滚动到顶部（有动画效果）
<el-scrollbarl ref="scroll">
// ...
</el-scrollbar>
<el-button @click="toTop">滚动到顶部</el-button>
<script>
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
? cubic(value * 2) / 2
: 1 - cubic((1 - value) * 2) / 2;
//...
methods: {
toTop() {
// el-scrollbar 容器
const el = this.$refs['scroll'].wrap;
const beginTime = Date.now();
const beginValue = el.scrollTop;
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
const frameFunc = () => {
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
rAF(frameFunc);
} else {
el.scrollTop = 0;
}
};
rAF(frameFunc);
}
}
//...
</script>
