如何在Vue中实现类似微信聊天记录的向上滚动加载功能而不让滚动条自动回到顶部？

<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, nextTick } from 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-ms/vue/3.2.31/vue.esm-browser.prod.min.js';

function generateNumbers(start, end) {
  if (!Number.isInteger(start) || !Number.isInteger(end)) {
    throw new Error('Start and end must be integers.');
  }
  if (start > end) {
    throw new Error('Start must be less than or equal to end.');
  }
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

createApp({
  setup() {
    const msgs = ref(generateNumbers(1, 200));
    const chatListRef = ref(null);
    let prevScrollTop = 0; // 新增：记录之前的滚动条位置

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

    const handleScroll = (ev) => {
      const target = ev.target;
      prevScrollTop = target.scrollTop; // 新增：记录滚动条位置
      if (target.scrollTop === 0) {
        const scrollHeightBefore = target.scrollHeight;
        msgs.value.unshift(...generateNumbers(msgs.value.length + 1, msgs.value.length + 200));
        nextTick(() => {
          const scrollHeightAfter = target.scrollHeight;
          target.scrollTop = scrollHeightAfter - scrollHeightBefore + prevScrollTop; // 恢复滚动条位置
        });
      }
    };

    nextTick(() => scrollToBottom());

    return { msgs, chatListRef, handleScroll };
  },
}).mount('#app');
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100vh;
  background-color: #e9f5f8;
}
.container {
  width: 200px;
  height: 500px;
  overflow-y: auto;
  background-color: #fff;
}
</style>