Infinite scroll not working

Describe the bug

I’m trying to use infinite scroll, however the provided examples don’t seem to work.

<template>
  <div
    class="flex flex-col gap-2 p-4 w-300px h-300px m-auto overflow-y-scroll bg-gray-500/5 rounded"
    ref="el"
  >
    <div v-for="item in data" :key="item">
      {{ item }}
    </div>
  </div>
</template>

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

const el = ref<HTMLElement | null>(null);

useInfiniteScroll(el, () => console.log("fetch"), { distance: 100 }); // nothing logged to console
</script>

Reproduction

https://stackblitz.com/edit/vitejs-vite-srqqu3

System Info

System:
    OS: Linux 5.18 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 19.16 GB / 31.27 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.3.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.5.5 - /usr/bin/npm
  npmPackages:
    @vueuse/components: ^8.6.0 => 8.6.0 
    @vueuse/core: ^8.6.0 => 8.6.0 
    vue: ^3.2.36 => 3.2.36

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[adgower]

I accomplished this using ‘useIntersectionObserver’

<script setup>
import { ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';

const el = ref(null);
const data = ref([1, 2, 3, 4, 5, 6]);

useIntersectionObserver(
  el,
  () => {
    const length = data.value.length + 1
    data.value.push(...Array.from({ length: 5 }, (_, i) => length + i))
  },
  {
    threshold: 0.5,
  }
)
</script>

<template>
  <a-row :gutter="[16, 16]">
    <a-col :span="24" v-for="item in data" :key="item">
      <a-card title="Card title">
        <p>card content {{ item }}</p>
      </a-card>
    </a-col>
  </a-row>
  <span ref="el"></span>
</template>

[lrstanley]

My hacky solution for now is once I fetch data, I check if the container still isn’t scrollable, it’ll make another call (assuming there is still more data to fetch), e.g:

    // if this fetch was triggered by a scroll event, don't trigger it a second time.
    if (wasScrollEvent) return
    setTimeout(() => {
      if (scrollContainer.value.scrollHeight <= scrollContainer.value.clientHeight) {
        fetchEvents(true)
      }
    }, 500)

Full logic:

const scrollContainer = ref(null) // attached to infinite scroll container.

function fetchEvents(wasScrollEvent) {
  if (!hasNextPage.value) return

  events.executeQuery().then((result) => {
    const data = result.data.value.githubevents

    if (data.pageInfo.hasNextPage) {
      cursor.value = data.pageInfo.endCursor
    } else {
      hasNextPage.value = false
    }

    fetched.value = [...fetched.value, ...data.edges.map(({ node }) => toRaw(node))]

    // if this fetch was triggered by a scroll event, don't trigger it a second time.
    if (wasScrollEvent) return
    setTimeout(() => {
      if (scrollContainer.value.scrollHeight <= scrollContainer.value.clientHeight) {
        fetchEvents(true)
      }
    }, 500)
  })
}

onMounted(() => {
  fetchEvents()
})