Vue聊天框默认滚动到底部

最新推荐文章于 2024-08-12 09:03:48 发布

weixin_30642267

最新推荐文章于 2024-08-12 09:03:48 发布

阅读量4.4k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lianjy/p/10764928.html

版权

本文介绍了在Vue中实现聊天框每当有新消息时自动滚动到底部的功能。核心原理是利用数据变化监听和DOM更新后的时机，设置滚动条的高度为最大高度，确保用户始终能看到最新消息。通过了解`scrollTop`和`scrollHeight`属性，可以实现聊天窗口的正确滚动。

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

功能场景

在开发中，我们总能遇到某些场景需要运用到聊天框，比如客服对话。如果你不是一名开发人员，可能你在使用QQ或者聊天工具的时候并没有注意到，当你发出一条消息的时候，窗体会默认滚动到最底部，让用户可以看到最新的聊天消息。

实现原理

通过每一次的数据变化，只要数据变化，将滚动的最大高度赋值给滚动条的最大高度。
scrollHeight:滚动条高度
scrollTop: 距离最顶部高度

实现过程

在vue中

<!-- 这是一个简易的范例，重点突出自动滚动底部 -->
<template>
  <div>
    <!-- 聊天窗体 -->
    <div class="test" id="gundong"></div>
    <!-- 输入窗体 -->
    <el-input></el-input>
    <!-- 确认按钮 -->
    <el-button @click="take">发送</el-button>
  </div>
</template>
<script>
export default {
  name: 'scroll',
  data () {
    return {
      chat: [
        {info: '聊天内容，触发后push一