背景

在做项目的时候，遇到一个需求往DIV添加内容的时候，需要将滚动条随内容滚动到底部，类似微信的聊天窗口那样，增强用户的体验感。在这里我利用了scrollTop = scrollHeight来实现我的想法。不过有几点需要注意的：
● vue利用的是虚拟dom来更新节点，再我每次添加内容的时候，获取到的dom都不是最新的。
● 用nextTick延迟回调，拿到最新dom？（试过没效果）
● 最后利用setTimeout来异步延迟拿到最新的DOM节点。

代码

<script setup lang="ts">
  // .........忽略其它代码
  let scrollRef = ref(null);
  const onSubmit = () => {
    // await nextTick();
    setTimeout(() => {
      console.log('内容增加时', scrollRef.value.scrollHeight);
      scrollRef.value.scrollTop = scrollRef.value.scrollHeight;
    }, 20); // 注意这里需要延迟20ms正好可以获取到更新后的dom节点
  };
  // 以下为测试
  onBeforeUpdate(() => {
    console.log('更新前', scrollRef.value.scrollHeight);
  });
  onUpdated(() => {
    console.log('更新后', scrollRef.value.scrollHeight);
  });
</script>

<template>
  <!--  ...忽略其他代码    -->
  <div class="body-container scrollbar" ref="scrollRef">
    <!--  ...忽略其他代码    -->
  </div>
</template>