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>