Next is not being fired if container doesn't have height set.

[PhilippSh]

Is it possible to fire data loading without setting the exact height on the ref? For me it doesn't fire unless I explicitly tell that the container height is static. Even onScroll event is not firing. Is there any solution for that?

[rhuanbarreto]

Duplicate of #185 . I'm trying to make a workaround for it. The core of the issue is in the isElementAtBottom function of the component. It should declare itself at bottom once hasMore is true.

@ankeetmaini says that this is the behavior of the component. Period. So, you need to wait if I manage to do a fork of the component and propose a PR or you can help me to do this. Hopefully @ankeetmaini will accept it.

[maxwellgerber]

My workaround for this was to add a child div with

.hackyOffPageElement {
  position: absolute;
  bottom: -20px;
  display: block;
  height: 10px;
  width: 10px;
}

That way, there's always a child element off screen.

[psrednicki]

Inspirated by @maxwellgerber I also added that workaround but by relative position and viewport values.

 hackyOffPageElement: {
    position: "relative",
    bottom: "-70vh",
    display: "block",
    height: "10px",
    width: "10px"
  }

[mdbiscan]

I am having this problem, but also in my project, the area being loaded is just above the fold in a tab. When the tab is clicked, it looks like it doesn't load anything. If the container has a height, and the tab is loaded with the infinite scroll component, and then the user scrolls down, it finally loads. So, the height hack only solves part of the problem.

[dvaldivia]

same problem, the component works great when sitting in the main body, but if I place it inside a div that's positioned absolutely, then it stops working

[carlos-dubon]

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