Vue中如何实现滚动到顶部加载更多数据且保持滚动位置不变？

学习文章要努力，但是不要急！今天的这篇文章《Vue中如何实现滚动到顶部加载更多数据且保持滚动位置不变？》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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 函数中的滚动行为。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~