How can I use vue-virtual-scroller with vueuse useInfiniteScroll?

Question

What I want to show is that I want to show several components with variable sizes using infinite scrolling and virtual scrolling. So I try to use vue-virtual-scroller and useInfiniteScroll. But when I scroll down the component is not added :

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import TestComponent from "@/components/COM/TestComponent.vue";
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import {DynamicScroller, DynamicScrollerItem} from 'vue-virtual-scroller'
import {useInfiniteScroll} from "@vueuse/core";

const data = ref([
  {
    id: 1,
    n: "2023-07-27",
    s: "title",
    u: "image"
  },
  {
    id: 2,
    n: "2023-07-27",
    s: "title",
    u: "image"
  },
  {
    id: 3,
    n: "2023-07-27",
    s: "title",
    u: "image"
  },
  {
    id: 4,
    n: "2023-07-27",
    s: "title",
    u: "image"
  },
  {
    id: 5,
    n: "2023-07-27",
    s: "title",
    u: "image"
  },
  {
    id: 6,
    n: "2023-07-27",
    s: "title",
    u: "image"
  }
])
const scroller = ref<HTMLElement>(null)

onMounted(() => {
  console.log("mounted")
  useInfiniteScroll(
      scroller,
      () => {
        console.log("update")
        data.value.push({id: data.value.length + 1, n: "test", s: "test2", u: "image"})
      },
      {
        distance: 10
      }
  )
})
</script>
<template>
  <DynamicScroller
      ref="scroller"
      :items="data"
      :min-item-size="300"
  >
    <template v-slot="{ item, index, active }">
      <DynamicScrollerItem
          :active="active"
          :data-index="index"
          :item="item"
          :size-dependencies="[item.s]"
      >
        <test-component :key="index" :param="item"/>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

<script lang="ts" setup>
const prop = defineProps({param:{}})
</script>

<template>
  <div class="card" style="width: 18rem;height: 300px">
    <div class="card-body">
      <h5 class="card-title">{{ param.s }}</h5>
      <h6 class="card-subtitle mb-2 text-body-secondary">{{param.n}}</h6>
      <img :src="param.u" alt="asd">
    </div>
  </div>
</template>

<style scoped>
.card{
  height: 300px;
}
</style>

I also saw this How can i use vue-virtual-scroller with vue use useInfiniteScroll? but it's not working.

Answer 1

Two things here:

first of all you should use v-bind:ref="scroller" instead of ref="scroller".

And, Call useInfiniteScroll directly inside the setup function, not within onMounted.

So, a psedu code should look like this:

<script lang="ts" setup>
import {ref} from 'vue';
import {DynamicScroller} from 'vue-virtual-scroller';
import {useInfiniteScroll} from '@vueuse/core';

const data = ref([/* Your data */]);
const scroller = ref(null);
useInfiniteScroll(scroller, () => data.value.push({/* New Item */}), {distance: 10});
</script>

<template>
  <DynamicScroller v-bind:ref="scroller" :items="data" :min-item-size="300">
    <!-- Item template -->
  </DynamicScroller>
</template>

And, lastly, make sure DynamicScroller gets a height and no errors are in the console.

Hope this helps!