标签自动滚动到底部（实时滚动）

前言

最近做 AI 对话相关项目时遇到一个需求，AI 回答的内容可能会很长，且是一段一段回复的，这时需要在回答时自动将页面滚动到最底部，以显示最新的内容。

实现方法

这个功能实现起来并不困难，核心就是利用标签的 scrollTop 和 scrollHeight 属性。

思路：每当接收到新内容时，将 scrollHeight 值赋给 scrollTop 即可，如果消息不是流式的，可以使用定时器模拟实现。

scrollTop： 一个元素的内容垂直滚动的像素数。
scrollHeight： 元素的高度。

原生

<template>
	<div id="scrollcontent"></div>
</template>

// 收到消息
onmessage() {
	let scrollcontent = document.getElementById("scrollcontent");
	scrollcontent.scrollTop = myDiv.scrollHeight;
	scrollcontent = null
}

vue

<template>
	<div ref="scrollcontent"></div>
</template>

// 收到消息
onmessage() {
	let scrollcontent = this.$refs.scrollcontent
	scrollcontent.scrollTop = scrollcontent.scrollHeight;
	scrollcontent = null
}

END