今天遇到一个小问题vue设置滚动条高度一直为0。解决方法放在下边。
在这里一定要加上this.$nextTick()方法,否则document.querySelector(“.article”).scrollTop的值永远为0,不会赋值成功的
methods: {
gundong() {
this.time = '60' //时间
this.article = document.querySelector('.article')//获取dom
this.aHeight = this.article.scrollHeight - 500 //页面卷上去的高度=页面可是高度-500 500是可视区域的高度自己设置的
this.sudu = this.aHeight / this.time / 5 //高度/时间=每秒的步长 再除以5 是0.2s的步长
this.timer = setInterval(() => {
this.$nextTick(() => {
this.article.scrollTop += this.sudu
})
if(this.article.scrollTop > this.aHeight - 1) {//因为被卷去的高度会存在误差所以-1
clearInterval(this.timer)
}
}, 200)
},
}