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);
}

原始滚动条样式设置

textarea{
    width: 100%;
    resize:none;
    vertical-align:top;
    border: none;
    text-indent: 20px;
    white-space: pre-line;
}
/*滚动条框设置*/
textarea::-webkit-scrollbar{
    width: 2px;
    background-color: rgb(232,193,113);
}
/*滚动条设置*/
textarea::-webkit-scrollbar-thumb{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #8d6900;
}