vue web聊天记录页面，定位最后一条消息到底部

w4n63r

已于 2023-10-10 09:33:32 修改

阅读量737

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

于 2023-10-10 09:23:47 首次发布

本文链接：https://blog.csdn.net/m0_60746035/article/details/133737800

本文介绍了如何在Vue应用中使用JavaScript方法scrollToBottom和scrollToLastMessage实现滚动功能，特别提到了当UI框架的聊天容器可能不支持时，如何通过包裹一层div以保证平滑动画。初次加载时会自动定位到最后一条消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  // 在适当的时机调用滚动到底部的方法，例如在添加新消息时
    scrollToBottom() {
      const chatContainer = this.$refs.chatContainer;
      const bottomElement = chatContainer.lastElementChild; // 获取容器的最后一个子元素

      if (bottomElement) {
        bottomElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
      }
    },

注意点：消息记录的父元素容器如果用其他ui框架的组件，可能会不生效。

这时再包一层div即可！
滑动的动画比较平滑

   // 在页面初始化时，将滚动位置设置为最后一条消息
    scrollToLastMessage() {
      const chatContainer = this.$refs.chatContainer;
      const lastMessage = chatContainer.lastChild;// 获取最后一条消息的 DOM 元素

      if (lastMessage) {  // 如果存在最后一条消息元素，则将其滚动到可视区域内
        lastMessage.scrollIntoView({ behavior: 'auto', block: 'end' });
      }
    },

页面初始展示最后一条消息！