使用vue和overflow属性，让滚动条始终在最后

您可以使用vue的ref属性来访问滚动容器，并在更新时将滚动位置设置为容器的高度。然后，您可以通过将overflow-y设置为"auto"或"scroll"来显示滚动条，并使用CSS属性scroll-behavior：smooth来使滚动更平滑。下面是一个示例代码：

<template>
<div ref="chatBox" class="chat-box" v-bind:style="{ maxHeight: boxHeight }">
<!-- 聊天记录 -->
<div v-for="(msg, index) in messages" :key="index" class="chat-message">
{{msg}}
</div>
</div>
</template>

<script>
export default {
data() {
return {
messages: [], // 聊天记录
boxHeight: '200px', // 聊天框高度
}
},
methods: {
// 添加一条消息到聊天记录中
addMessage(msg) {
this.messages.push(msg);
this.$nextTick(() => {
// 让滚动条自动滚到底部
this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
});
}
}
}
</script>

<style>
.chat-box {
overflow-y: auto;
scroll-behavior: smooth;
}
</style>