Infinite scroll doesn't trigger when scrolling in a overflow scroll element about react-infinite-scroll-component

[ankeetmaini]

@sshadmand ideally you shouldn't give overflow-y: scroll to the parent container. This InfiniteScroll component takes a prop height and makes it scrollable automatically after that height. So you should be good to go!

<InfiniteScroll
          next={functionToLoadMore}
          hasMore={true}
          height={300} // this is what I am talking about
          loader={<h4>Loading...</h4>}>
          {yourData}
        </InfiniteScroll>

If you still can't get it to work, can you share a JSBin where I can take a look?

[rajivhbk]

I'm facing a similar issue. I can't add height as giving height gives my table another scrollbar. I've my scroll able element already defined. I tried passing ref to parent element having overflow-y: scroll to the "scrollableTarget" prop but it didn't work for me.

[ankeetmaini]

Closing this issue for now, do let me know if it still doesn't work for you. You can even refer the demo file in the directory demos/height.js

[IdelCoder]

@sshadmand ideally you shouldn't give overflow-y: scroll to the parent container. This InfiniteScroll component takes a prop height and makes it scrollable automatically after that height. So you should be good to go!

<InfiniteScroll
          next={functionToLoadMore}
          hasMore={true}
          height={300} // this is what I am talking about
          loader={<h4>Loading...</h4>}>
          {yourData}
        </InfiniteScroll>

If you still can't get it to work, can you share a JSBin where I can take a look?

Great, that's it. Thanks!

[dquanghuy4444]

@sshadmand ideally you shouldn't give overflow-y: scroll to the parent container. This InfiniteScroll component takes a prop height and makes it scrollable automatically after that height. So you should be good to go!

<InfiniteScroll
          next={functionToLoadMore}
          hasMore={true}
          height={300} // this is what I am talking about
          loader={<h4>Loading...</h4>}>
          {yourData}
        </InfiniteScroll>

If you still can't get it to work, can you share a JSBin where I can take a look?

Thank u so much

[AGSTRANGER]

Is there a way to make the height equal to the parent element?