elementUi滚动条的使用及设置滚动条一直显示

把想要出滚动条的内容放在下边标签里即可：

<el-scrollbar style="height:100%">

</el-scrollbar>

• 如果不想要横向的滚动条，添加css

.el-scrollbar__wrap {
  overflow-x: hidden;
}

• 如果相让滚动条一直显示而不是鼠标移入才显示，添加css

.el-scrollbar__bar.is-vertical {
  opacity: 1;
}

• 滚动到自定义位置

<el-scrollbarl ref="scroll">
  // ...
</el-scrollbar>

this.$refs['scroll'].wrap.scrollTop = 100  //想滚到哪个高度，就写多少

• 动态滚动条

<el-scrollbar :style="{height: getHeight()}">
	<div v-for="item of dataList">
		//...
	</div>
</el-scrollbar>

<script>
methods: {
  getHeight() {
  	//内容高度小于100px 的时候，区域随内容高度自适应；内容高度大于 100px 时显示滚动条
	if(this.dataList.length>5) {
	  return '100px'
	} else {
	  return 'auto'
	}
  }
}
//...
</script>

• 滚动条出现的问题及解决方案
  如果父级高度会改变，那么滚动条上下拖动就会出现异常
  这时只需要在父组件高度改变时，调用组件的update方法即可
  如：窗口高度改变时

<el-scrollbar style="height:100%" ref="scrollbar"></el-scrollbar>

let timer = 0;
window.onresize = () => {
	//防抖
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
        this.$refs.scrollbar.update();
    }, 500);
}