vue-virtual-scroller结合useInfiniteScroll回调不触发问题求助

我在Vue项目里使用@vueuse/core的useInfiniteScroll实现无限滚动，同时采用vue-virtual-scroller的DynamicScroller构建虚拟列表。已按文档要求将ref绑定到DynamicScroller.e-solution-list__body组件，但滚动接近元素底部时，useInfiniteScroll的回调函数始终无法触发。尝试过三种方法均未解决：确认ref绑定有效性、通过document.getElementById/querySelector获取滚动元素、将useInfiniteScroll调用包裹在nextTick中。

相关代码：

<template lang="pug">
DynamicScroller.e-solution-list__body(:items="items" :min-item-size="54" v-if="items.length && !solutionTable.loading" :emit-update="true" ref="scroller")
        template(#default="{ item, index, active }")
          DynamicScrollerItem(:item="item" :active="active" :data-index="index")
            .e-solution-list__row(:key="item.id" :class="{ 'e-solution-list__row--expanded': isExpanded(item.id), 'e-solution-list__row--mobile-border': !isExpanded(item.id) || !item.tags.length }")
</template>

<script lang="ts">
import { useInfiniteScroll } from '@vueuse/core'
 setup(props) {
    const columns = ref(SOLUTION_COLUMNS)
    const id = ref(props.problemId)
    const solutionTable = reactive({
      loading: false,
      loadMore: false,
      data: [],
      totalCount: 0,
      query: {
        sortBy: '-createdDate',
        skip: 0,
        limit: USE_CASE_LIMIT,
        text: '',
        popPaths: 'solutionProviderList,actors,sfCategories,sfSubCategories,sfIndustries,sfTechnologies,sfTags'
      }
    })
    const scroller = ref<HTMLElement>(null)
 //infinite scroll
    nextTick(() => {
      useInfiniteScroll(
        scroller,
        () => {
          getRelatedSolutions({
            skip: items.value.length,
            limit: USE_CASE_LIMIT,
            loadMore: true,
            isScrollTop: false,
            sortBy: sortBy.isAscending ? sortBy.key : `-${sortBy.key}`
          })
        },
        {
          distance: ITEM_HEIGHT * 2
        }
      )
    })
}
</script>

• 确认实际滚动容器：vue-virtual-scroller的DynamicScroller内部通常嵌套了真正的滚动元素（比如带.vue-virtual-scroller__content类的元素），你绑定的ref可能只是组件根元素，而非实际产生滚动的DOM节点。检查DOM结构，找到带有overflow: auto/scroll样式的元素。
• 校验distance参数：ITEM_HEIGHT * 2的设定可能不合理——如果虚拟列表可视区域较大，这个距离可能还没触发就已滚动到底；或者元素实际高度和ITEM_HEIGHT不符，导致触发条件计算偏差。
• 验证监听目标类型：打印scroller.value，确认它是原生HTMLElement而非Vue组件实例。如果是组件实例，需要通过scroller.value.$el获取真实DOM元素。
• 排除状态阻塞：回调中调用getRelatedSolutions时，是否未处理solutionTable.loading状态？若一直处于loading，可能会重复拦截请求，或阻塞DOM更新导致滚动状态判断失效。
• 检查事件拦截：项目中是否存在其他全局滚动监听、自定义指令等，可能阻止了useInfiniteScroll的滚动事件监听。

1. 绑定正确的滚动容器 #

vue-virtual-scroller的DynamicScroller默认内部的.vue-virtual-scroller__content是滚动容器，需将监听目标指向该元素：

import { useInfiniteScroll, onMounted } from '@vueuse/core'

setup(props) {
  // ...其他代码
  const scroller = ref<HTMLElement>(null)

  onMounted(() => {
    // 获取实际滚动容器
    const actualScrollEl = scroller.value?.querySelector('.vue-virtual-scroller__content') as HTMLElement
    if (!actualScrollEl) return

    useInfiniteScroll(
      actualScrollEl,
      () => {
        // 先判断loading和是否还有更多数据
        if (solutionTable.loading || items.value.length >= solutionTable.totalCount) return
        
        getRelatedSolutions({
          skip: items.value.length,
          limit: USE_CASE_LIMIT,
          loadMore: true,
          isScrollTop: false,
          sortBy: sortBy.isAscending ? sortBy.key : `-${sortBy.key}`
        })
      },
      {
        distance: 100 // 改用固定值，或根据可视区域动态计算
      }
    )
  })
}

2. 动态计算distance值 #

避免硬编码高度，根据滚动容器的可视区域动态设置触发距离：

onMounted(() => {
  const actualScrollEl = scroller.value?.querySelector('.vue-virtual-scroller__content') as HTMLElement
  if (!actualScrollEl) return

  // 设置为可视区域高度的一半，确保提前触发加载
  const distance = actualScrollEl.clientHeight / 2

  useInfiniteScroll(actualScrollEl, () => { /* 加载逻辑 */ }, { distance })
})

3. 改用vue-virtual-scroller内置滚动事件 #

直接监听DynamicScroller的scroll事件，适配性更强：

DynamicScroller.e-solution-list__body(
  :items="items" 
  :min-item-size="54" 
  v-if="items.length && !solutionTable.loading" 
  :emit-update="true" 
  ref="scroller"
  @scroll="handleScroll"
)

const handleScroll = (e: Event) => {
  const target = e.target as HTMLElement
  // 判断是否接近底部（预留100px触发）
  const isNearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 100
  
  if (isNearBottom && !solutionTable.loading && items.value.length < solutionTable.totalCount) {
    getRelatedSolutions({
      skip: items.value.length,
      limit: USE_CASE_LIMIT,
      loadMore: true,
      isScrollTop: false,
      sortBy: sortBy.isAscending ? sortBy.key : `-${sortBy.key}`
    })
  }
}

内容的提问来源于stack exchange，提问作者eşelk eşekll