<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;Ï
})
欢迎补充!!