Unable to load more results when initial list loaded is smaller than container

[jedster1111]

Hi, really liking the library.

https://codesandbox.io/s/distracted-bogdan-zhcit?file=/src/index.js The above is a working example of inverse scrolling within a fixed height container of 300px.

If you modify the height (line 35) to 800px you'll see an initial load that looks like:

There doesn't seem to be any way to then trigger loading the next page of data.

Would this be something that would be possible to be addressed in this library? If there is no scrollbar, but there is still more data to fetch, then trigger the next function until there either is a scrollbar or there is no more data to fetch? Maybe you there is an alternative way to tackle this that I'm not thinking of as well.

Tested on

• Chrome Version 86.0.4240.75
• macOS Mojave Version 10.14.6

[ADCrouch]

@jedster1111 I'm having the same issue, did you find a solution?

[jedster1111]

@ADCrouch I ended up figuring something out, tried to recreate it in CodeSandbox. It's a little bit rough around the edges and I couldn't test the window resizing part but it should be a good enough starting point. https://codesandbox.io/s/vibrant-shannon-05o50?file=/src/Scroller.tsx

The logic is really just, if I'm not scrollable, there's still data to be loaded, and I'm not already loading, then load some more data. 😄

[ADCrouch]

@jedster1111 What a great solution, thank you thank you thank you!

[sgehrman]

same issue

[compassmatt]

Also same issue.

[toschlog]

It would be super-nice if this logic were built in to react-infinite-scroll-component: If the element isn't scrollable but more items are available, request more items.

[panzerdp]

Unfortunately, I have the same issue.

A workaround is to force Infinite Scroll to check the container height by triggering a custom scroll event on the window.

First, define the hook that triggers scroll events when deps change:

import { useEffect } from 'react';

export function useTriggerScrollFix(deps) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.dispatchEvent(new CustomEvent('scroll'));
    }
  }, deps);
}

Then invoke the hook inside the component that uses the infinite scroll:

function MyComponent() {
  // fetching logic of `items`....

 // Trigger manually a scroll event to
 // force infinite loading to reconsider
 // container height
 useTriggerScrollFix([items.length]);

 return (
   <InfiniteScroll
      dataLength={items.length}
      // ....
    >
      {items}
    </InfiniteScroll>
  );
}

[jacten]

@panzerdp It seems this solution triggers infinite scroll to query for more results on load regardless of if the scroll bar is showing.

Correct solution should only trigger if there is no scrollable area. Otherwise might as well just increase the initial query amount (except in cases where that is not possible).

[symbiosdotwiki]

same problem

[ssudekum]

same problem

[sepehr500]

same problem

[sepehr500]

Here is my jank solution (useInterval is from react-use)

useInterval(() => {
    const scrollComponent = document.getElementsByClassName(
      "infinite-scroll-component ",
    )[0];
    if (
      scrollComponent &&
      scrollComponent.scrollHeight < scrollComponent.clientHeight &&
      !isFetchingNextPage
    ) {
      fetchNextPage();
    }
  }, 1000);

[rafikor]

still same problem

[Srezzx]

Hey, did anyone find the fix for this. Having the same issue, when the size of the container doesn't allow scroll, I can still see my loader, but next() is not getting called.

@team kindly look into this!