ankeetmaini / react-infinite-scroll-component

An awesome Infinite Scroll component in react.
https://react-infinite-scroll-component.netlify.com/
MIT License
2.87k stars 322 forks source link

How to add scrollableTarget for shadowDOM element #275

Open parsoman opened 3 years ago

parsoman commented 3 years ago

I am trying to pass node of type HTMLDivElement in scrollableTarget but it gives this error - Uncaught TypeError: Cannot read property 'clientHeight' of null As I am using webcomponent with shadowDOM, so I can not pass id of that divElement as you would never find it using document.getElementById . So is there any way to have this scrollableTarget for shadowDom too? Any help regarding this will be appreciated.

Thanks!

jp-olvera commented 3 years ago

Maybe if you could provide the code you were working on we could figure out a way to solve it, in case you still have it

luichooy commented 1 year ago

Maybe if you could provide the code you were working on we could figure out a way to solve it, in case you still have it

here is reproduction link, thanks! https://codesandbox.io/s/angry-rhodes-9hxmg6?file=/src/index.js

andrii-shpontak commented 10 months ago

Maybe if you could provide the code you were working on we could figure out a way to solve it, in case you still have it

here is reproduction link, thanks! https://codesandbox.io/s/angry-rhodes-9hxmg6?file=/src/index.js

Hello, the code you specified will work without scrollableTarget. I have a similar problem, I can't bind it to the parent component

luichooy commented 10 months ago

Maybe if you could provide the code you were working on we could figure out a way to solve it, in case you still have it

here is reproduction link, thanks! https://codesandbox.io/s/angry-rhodes-9hxmg6?file=/src/index.js

Hello, the code you specified will work without scrollableTarget. I have a similar problem, I can't bind it to the parent component

Are you implying that I should remove the scrollableTarget="scrollableDiv" statement from <InfiniteScroll />? I just tried, but it still doesn't work properly. The fetchMoreData method doesn't get called again to load new data when i scrolled to the bottom.

andrii-shpontak commented 10 months ago

Maybe if you could provide the code you were working on we could figure out a way to solve it, in case you still have it

here is reproduction link, thanks! https://codesandbox.io/s/angry-rhodes-9hxmg6?file=/src/index.js

Hello, the code you specified will work without scrollableTarget. I have a similar problem, I can't bind it to the parent component

Are you implying that I should remove the scrollableTarget="scrollableDiv" statement from <InfiniteScroll />? I just tried, but it still doesn't work properly. The fetchMoreData method doesn't get called again to load new data when i scrolled to the bottom.

I was looking for a solution to this problem for a long time, but it was trivial, I just didn’t get attached to it, you need to look for an element on which you have a height and scrolling works and put a target to it ;)

hoboy0313 commented 4 months ago

actually, it's easy to solve.

image

add it~