vue3_聊天窗发送消息，滚动条自动定位到底部

前端小菜鸡yy

已于 2023-12-11 15:06:30 修改

阅读量899

点赞数 1

分类专栏： Vue常用功能实现文章标签： javascript 前端 vue.js

于 2023-07-25 16:40:23 首次发布

本文链接：https://blog.csdn.net/qq_45104829/article/details/131920952

版权

Vue常用功能实现专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在开发聊天功能时，当用户发送消息并收到后台回复后，需要自动将滚动条移动到底部，以显示新消息。文章提到的代码片段使用Vue的`nextTick`方法，在数据更新后确保DOM已更新，然后设置`scrollTop`为`scrollHeight`，实现滚动条定位到最下方，避免新消息被遮挡。

摘要由CSDN通过智能技术生成

在做聊天-回复功能的时候，用户发送了消息，后台回复消息后，滚动条还是定位在用户发送的那条消息的位置；后台回复的消息会被遮挡；
这时需要将滚动条定位到最下面

<template>
 <div class="answer">
    <div class="robot"></div>
    <div class="user"></div>
 </div>
 <el-button @click="sendMsg">sendMsg</el-button>
</template>

<script setup lang="ts">
import {ref,nextTick} from 'vue'
const answer = ref<HTMLElement>()
const sendMsg = () =>{
    /*
      ....
    */
    nextTick(() => {
        answer.value!.scrollTop = answer.value!.scrollHeight
    })
}