vue设置scrollTop不起作用

最新推荐文章于 2023-06-02 11:40:42 发布

慕慕慕白

最新推荐文章于 2023-06-02 11:40:42 发布

阅读量1.8k

点赞数 2

分类专栏： vue js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45326146/article/details/119248561

版权

js 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

今天遇到一个小问题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)
	},
}