vue 滚动条显示的几种方法

<div  class="chapterList"  id="dataUp" ref="Container"> </div>


// y轴滚动条
.chapterList {
  overflow-y: scroll;
  height: 350px;
}
// 滚动条样式
.chapterList:-webkit-scrollbar {
  width: 5px;
  position: absolute;
  right: 0px !important;
}
.chapterList::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}
.chapterList ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 50px;
}

1.1使用setTimeout() 将DOM操作改为异步。

//滚动条显示在最下方
this.timer = setTimeout(() => {
        this.$refs.container.scrollTop =
          this.$refs.container.scrollHeight;
     
        // 清理定时器
        clearTimeout(this.timer);
      }, 0);

1.2

 //滚动条显示在最下方
      this.$nextTick(() => {
        var div = document.getElementById("dataUp");
        div.scrollTop = div.scrollHeight;
      });

2 elementui中的table

 1.设置table的ref为tableList

 2.设置滚动至顶部

this.$nextTick(()=>{
    this.$refs.tableList.bodyWrapper.scrollTop =0;
})

3设置滚动至底部

this.$nextTick(()=>{
　　this.$refs.tableList.bodyWrapper.scrollTop =this.$refs.tableList.bodyWrapper.scrollHeight;Ï
})

欢迎补充！！