如何在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>