vue中div滚动的内容默认滚动到最新的内容（默认滚动到底部）

最新推荐文章于 2024-08-09 11:20:59 发布

素人猕猴涛

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量1.1k

点赞数 1

分类专栏： vue基础文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/qq_44052087/article/details/128135788

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

有帮助就点个赞吧！！！多谢

<template>
	<div>
		<div class="chat-box" ref="messagesContainer">
			<div class="chat-box-content">
				<!-- 滚动区域，内容xxx -->
			</div>
		</div>
	</div>
</template>

export default {
	data() {
		return {};
	},
	mounted() {
		//  如果默认没有内容，就不用写这个
		this.scrollToBottom();
	},
	
	updated() {
		this.scrollToBottom();
	},

	methods: {
		scrollToBottom() {
			this.$nextTick(()=> {
				let box = this.$el.querySelector(".chat-box-content");
				box.scrollTop = box.scrollHeight;
			})
		},
	}
}

.chat-box {
	width: 330px;
	height: 230px;
	background: #F4F4F4;
	border-radius: 12px;
	padding-top: 8px;
	position: relative;
	
	.chat-box-content {
		height: 190px;
		overflow: scroll;
	}
}