vue3滚动条默认保持在最底部，让滚动条在每次更新内容时保持在最底部

实现思路：更新内容 → 等待 DOM 更新 → 滚动到底部。

代码如下：

<template>
  <div class="ac-think-content" ref="contentContainer">
    {{ showContent }}
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
const showContent = ref("我国车企通过技术授权模式进背景：2026年美国对华电动汽车征收45%关税背景下，我国车企通过技术授权模式进");
const contentContainer = ref(null); // 获取容器元素的引用
onMounted(() => {
  setInterval(() => {
    showContent.value += ",立法听证会护航未成年人网络权益,";
    // 使用 nextTick 确保 DOM 更新后再滚动
    nextTick(() => {
      if (contentContainer.value) {
        contentContainer.value.scrollTop = contentContainer.value.scrollHeight;
      }
    });
  }, 2000);
});
</script>
<style>
.ac-think-content {
  height: 200px; /* 或其他固定高度 */
  overflow-y: auto; /* 确保有垂直滚动条 */
  /* 其他样式 */
}
</style>