如何使用Vue 3实现类似微信聊天记录的向上滚动加载功能？

<template>
  <div id="app">
    <div class="container" ref="chatlistref" @scroll="handleScroll">
      <ul>
        <li v-for="item in msgs" :key="item">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { createApp, ref, onMounted, nextTick } from 'vue';

const generateNumbers = (start, end) => {
  // ... (same as before) ...
};

const app = createApp({
  setup() {
    const msgs = ref(generateNumbers(1, 200));
    const chatlistref = ref(null);

    const scrollToBottom = async () => {
      const chatListElement = chatlistref.value;
      if (chatListElement) {
        chatListElement.scrollTop = chatListElement.scrollHeight;
      }
    };

    const handleScroll = (ev) => {
      const target = ev.target;
      if (target.scrollTop === 0) {
        msgs.value.unshift(...generateNumbers(201, 400));
        // 问题：此处加载新数据后，滚动条会回到顶部
      }
    };

    onMounted(() => {
      scrollToBottom();
    });

    return {
      msgs,
      chatlistref,
      handleScroll
    };
  }
});

app.mount('#app');
</script>

<style scoped>
/* ... (same as before) ... */
</style>

const handleScroll = (ev) => {
  const target = ev.target;
  if (target.scrollTop === 0) {
    const scrollHeightBefore = target.scrollHeight;
    msgs.value.unshift(...generateNumbers(201, 400));
    nextTick(() => {
      const scrollHeightAfter = target.scrollHeight;
      target.scrollTop = scrollHeightAfter - scrollHeightBefore;
    });
  }
};