vue 滚动到顶部时加载更多数据，但保持滚动位置不变
在某些场景中，我们需要类似微信聊天记录那样，当用户向上滚动到顶部时加载更多历史记录，但滚动条位置依然保持在当前位置。
下面提供一种解决方法：
<div class="container" @scroll="handlescroll" ref="chatlistref"> <ul> <li v-for="item in msgs">{{ item }}</li> </ul> </div>
import { createApp, ref, nextTick } from 'vue' createApp({ setup() { const msgs = ref([]) const chatListRef = ref() const scrollToBottom = async () => { const chatListElement = chatListRef.value if (chatListElement) { chatListElement.scrollTop = chatListElement.scrollHeight } } const handleScroll = (ev) => { const target = event.target if (target.scrollTop === 0) { // TODO: 加载更多数据 alert('添加完数据后希望停留在当前数据的位置，而不是最顶部') } } nextTick(() => { scrollToBottom() }) return { msgs, chatListRef, handleScroll } } }).mount('#app')
当向上滚动到顶部时，handlescroll 函数会被触发，此时可以判断 scrolltop 是否为 0，如果是，则加载更多数据并更新 msgs 数组。关键在于，在加载更多数据后，需要调用 scrolltobottom 函数将滚动条位置调整回当前位置。
立即学习“前端免费学习笔记（深入）”；
请注意，你可以根据需要修改 scrolltobottom 函数中的滚动行为。
