next won't be triggered, if there is no scrollbar

[overdoz]

Hey! When i zoom out and the entire list is displayed, there is no way of loading more data. I think this is because no scrollevent can be detected. Is there an out-of-the-box solution for this issue? Thanks!

[cahbb]

Got the same issue. I'm loading a list of rows but if the list does not overflow the window bottom edge it does not load any data.

<InfiniteScroll
    dataLength={data.transactions.transactions.length}
    next={() =>
      refetch({
          first: data.transactions.transactions.length + COUNT_TRANSACTIONS,
        })
    }
    hasMore={data.transactions.transactions.length < 100}
    loader={<SkeletonTransaction />}
    endMessage={
      <p style={{ textAlign: 'center' }}>
        <b>Yay! You have seen it all</b>
      </p>
    }
  >
    <TransactionList transactions={data.transactions.transactions} />
</InfiniteScroll>

[symbiosdotwiki]

same problem

[bryanprimus]

i think at that case if your data container height is fixed you can set the height and scrollable target. but for many cases just increase the data limit until it reach more than window height

[T-Damer]

As me, I triggered data fetch on first load like this:

 useEffect(() => {
      fetchMorePosts()
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

[sourabkapoor]

Had this similar issue. Used a workaround for this problem by checking scrollbar visibility.

function scrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}

And then fetch next data on this condition. Hope it helps.

[victorsferreira]

@sourabkapoor and how did you get element?

[sourabkapoor]

@victorsferreira You can use querySelector()/getElementById() to get your content div which is supposed to scroll.