vue2 使一个盒子的内容滚动到底部

在Vue 2中，要实现一个聊天框动态加载数据并且滚动到底部，可以结合`vue-chat-scroll`插件来完成。首先安装该插件：

npm install vue-chat-scroll

然后在组件中导入并使用它：

<template>
  <div id="chatContainer" ref="scrollRef">
    <!-- 动态加载的聊天数据 -->
    <div v-for="message in chatMessages" :key="message.id">{{ message.text }}</div>
  </div>
</template>

<script>
import VueChatScroll from 'vue-chat-scroll';

export default {
  components: {
    VueChatScroll
  },
  data() {
    return {
      chatMessages: [] // 假设这是你的聊天数据数组
    };
  },
  mounted() {
    this.$refs.scrollRef.scrollToBottom(); // 加载完成后滚动到底部
  },
  methods: {
    addMessage(newMessage) {
      this.chatMessages.push(newMessage);
      // 如果你想在添加新消息后立即滚动到底部，可以在这里调用scrollToBottom
      this.$refs.scrollRef.scrollToBottom();
    }
  }
};
</script>

这样，每次有新的聊天信息（通过`addMessage`方法）加入时，聊天容器会自动滚动到底部。