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

  // 在适当的时机调用滚动到底部的方法，例如在添加新消息时
    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' });
      }
    },

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