useInfiniteScroll Infinite loop

kingwrcy commented 3 months ago

Describe the bug

I haven't started scrolling the scroll bar yet, but it keeps calling the function onLoadMore in an infinite loop. The code is copied from the demo of the official website.

Reproduction

https://stackblitz.com/edit/vitejs-vite-jcnxvx?file=src%2FApp.vue

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vueuse/components: ^10.10.0 => 10.10.0 
    @vueuse/core: ^10.10.0 => 10.10.0 
    vue: ^3.4.27 => 3.4.27

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
[X] The provided reproduction is a minimal reproducible example of the bug.

RandallAnjie commented 3 months ago

You need to add height and overflow attributes to the outer div to ensure that the page has enough space for scrolling

<div style="height: 400px; overflow: auto;" v-infinite-scroll="[onLoadMore, { distance: 10 }]">
    <div v-for="item in data" :key="item">
      {{ item }}
    </div>
  </div>

It seems that the examples on the official website do not add these two attributes.

andrewvasilchuk commented 2 months ago

I believe this behavior is expected. Even if you don't scroll, the callback will still be triggered to fetch more items and fill the remaining height.

The reproduction link you provided does not contain a valid example of the issue.

FacundoBrum16 commented 9 hours ago

i have the same issue, It makes me feel insecure

vueuse / vueuse