el-scrollbar实现自动滚动到底部（AI聊天）

目录

项目背景

实现步骤

实现代码

完整示例代码

---

项目背景

chatGPT聊天消息展示滚动面板，每次用户输入提问内容或者ai进行流式回答时需要不断的滚动到底部确保展示最新的消息。

实现步骤

采用element ui 的el-scrollbar作为聊天消息展示组件。

通过操作dom来实现滚动到底部。

通过vue的watch来监听聊天消息列表的变动。

实现代码

  <el-scrollbar height="400px" ref='scrollMenuRes'><!-- 内容 --></el-scrollbar>

//滚动面板自动滑动到底部
const scrollToBottom = () => {if (scrollMenuRes.value) {const container = scrollMenuRes.value.$el.querySelector('.el-scrollbar__wrap');container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果container.scrollTop = container.scrollHeight;}
};

完整示例代码

<template><div><el-scrollbar height="400px" ref='scrollMenuRes'><!-- 内容 --><h1>消息:1</h1><h1>消息:11</h1><h1>消息:111</h1><h1>消息:1111</h1><h1>消息:11111</h1><h1>消息:111111</h1><h1>消息:1111111</h1><h1>消息:11111111</h1><h1>消息:111111111</h1><h1>消息:1111111111</h1><h1>消息:11111111111</h1><h1>消息:111111111111</h1><h1>消息:1111111111111</h1></el-scrollbar></div>
</template><script setup lang="ts">
import { ref,onMounted,watch } from 'vue';
import { ElScrollbar } from 'element-plus';
//聊天消息滚动面板dom
const scrollMenuRes = ref<any>(null);//滚动面板自动滑动到底部
const scrollToBottom = () => {if (scrollMenuRes.value) {const container = scrollMenuRes.value.$el.querySelector('.el-scrollbar__wrap');container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果container.scrollTop = container.scrollHeight;}
};onMounted(() => {scrollToBottom();
})
</script><style scoped></style>