element-UI中el-scrollbar的使用

在elment-ui中有这么一个滚动条，当鼠标over到内容部分才会显示，移开鼠标之后滚动条就会隐藏起来，相较于原生的滚动条比较美观。

<el-scrollbar> 

    //将滚动条的内部的内容放在里面即可    

</el-scrollbar>

在使用过程中，如果父级高度发生改变的时候，滚动条拖动就会出现异常的情况，这个时候需要父组件的高度，当发生改变的时候，调用组件的 update 方法；这里主要在 mounted 里面对其进行监听，当然定时器也可以（详见参考）

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


this.$nextTick(() => {
   const scr = this.$refs.scrollbar.$el; // 获取<el-scrollbar>的DOM节点
   const observer = new ResizeObserver(() => {
   this.$refs.scrollbar.update();
  });
   observer.observe(scr); // 监听高度变化
});

---

参考：

elementUi滚动条的使用及设置滚动条一直显示_element ui 滚动条-CSDN博客