Bug Report - Infinite scroll not working when height isn't enough to scroll.

[Oleven]

I found an issue while using this component in a React app and was able to reproduce it in one of the available examples of the documentation. The whole functionality of this module is triggered only when scroll is made at least once. If a scroll isn't made, data isn't loaded at all.

If you go to one of the codesandbox URLs available as an example (https://codesandbox.io/s/r7rp40n0zm) and change the Array length at line 14 to 3, you'll see the infinite scroll doesn't trigger at all.

[nganbread]

+1

[benkenawell]

You might want to check out Issue #286, this one looks like it might be the same.

I'm here cause I'm actually having the same issue.

[notKvS]

I found an issue while using this component in a React app and was able to reproduce it in one of the available examples of the documentation. The whole functionality of this module is triggered only when scroll is made at least once. If a scroll isn't made, data isn't loaded at all.

If you go to one of the codesandbox URLs available as an example (https://codesandbox.io/s/r7rp40n0zm) and change the Array length at line 14 to 3, you'll see the infinite scroll doesn't trigger at all.

But why would you implement infinite scroll component if your component is not even taking whole page or have scrollable component.

And if you want to limit the scroll upto certain height you can add 1 useffect inside that component for initial render calling fetchMore.

Or

If you don't want to do that then you can pass height props and then it would call fetch again.

[Oleven]

Fact is: I could need a responsive layout and in such situations you never know the exact height of the component on which you'll apply the infinite scroll.

In my exact situation I have ~10 infinite scrolls in a single view as we have many different info to show and having to put a trick isn't a thing I'd like to do. And in this exact scenario calling a "fetchMore" on 10 different components just in case they are needed isn't a solution, it is a performance nightmare.

[mariusc23]

We just ran into this today. @ankeetmaini is there any plan to fix it? Would you accept a PR for this (if yes, do you have some pointers where to start)? Thanks!

[Enase]

I have the same troubles and use this huck as a temporary solution:

  useEffect(() => {
    const root = document.getElementById('app');
    if (!loading && hasNextPage && root.scrollHeight <= root.clientHeight) {
      loadData();
    }
  }, [loading, hasNextPage]);

[abhishekangira]

I have the same troubles and use this huck as a temporary solution:

  useEffect(() => {
    const root = document.getElementById('app');
    if (!loading && hasNextPage && root.scrollHeight <= root.clientHeight) {
      loadData();
    }
  }, [loading, hasNextPage]);

Thanks for this.

[Kamleshpaul]

I m also facing same issue this there should have some api built-in in this component may be create a PR any one please @Enase i try your solution it call to many api call

[slavaguk2000]

+1 can you fix it please?

[ConstanzaCurzio]

Having the same issue still

[therealchewbecca]

+1 I also just discovered this issue, unfortunately after hours of banging my head against the wall when the component works in a similar implementation and not in another. If the viewport height is greater than the height of the initially loaded items (in my case 10), the next function doesn't fire.

[annika-linke]

I have the same troubles and use this huck as a temporary solution:

  useEffect(() => {
    const root = document.getElementById('app');
    if (!loading && hasNextPage && root.scrollHeight <= root.clientHeight) {
      loadData();
    }
  }, [loading, hasNextPage]);

This works for me. Thanks!

[supuwoerc]

It should detect if the data is full of the target element, otherwise trigger next until it is full

[carlos-dubon]

https://stackoverflow.com/questions/67699376/react-infinite-scroll-component-stopped-working-after-one-call-loadmore-only