vue怎么刚渲染完页面或者点击某个方法的时候让滚动条在最底部

最新推荐文章于 2023-09-15 16:51:45 发布

原创最新推荐文章于 2023-09-15 16:51:45 发布 · 930 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

渲染完页面的时候让滚动条在最底部

当前文章被收录于：

渲染完页面的时候让滚动条在最底部

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了在Vue中如何在页面渲染完成或点击特定方法时将滚动条置底的解决方案，核心思路是设置滚动条距离顶部的位置等于内容区域的高度。

vue怎么刚渲染完页面或者点击某个方法的时候让滚动条在最底部

今天在做项目的时候遇到了这个问题，解决方法：

//两种方法都行
aaa1(){
	this.$nextTick(function(){
		var container = document.getElementById('dialogue_box');
		container.scrollTop = container.scrollHeight;
	})
}

aaa2(){
	this.$nextTick(() => {
		//这三个都行
		// var container = this.$el.querySelector(".block1");
		//var container = this.$el.querySelector("#block1");
		var container = document.getElementById("block1")
		container.scrollTop = container.scrollHeight;
	})
}

//每次页面渲染完之后滚动条在最底部，一次的话直接就在created里面写就行
updated:function(){
	this.aaa1();
	//或者
	this.aaa2();
	//或者在某个方法调用
}