vue3滚动条默认保持在最底部,让滚动条在每次更新内容时保持在最底部 电脑版发表于:2025/6/3 15:46 tn2> 实现思路:更新内容 → 等待 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> ```