scrollableTarget not working about react-infinite-scroll-component

[lsvargas]

@ankeetmaini sorry if i didnt make myself clear, I want next to be called when my Table's scrollbar reaches the end, but what is actually happening in the code above is that next is called when the main window scroll moves.

[ankeetmaini]

When the scrolling is on your main browser's window you don't need scrollableTarget at all. You can just make it working like this https://codesandbox.io/s/yk7637p62z

[rajivhbk]

I tried passing reference to the parent element having scrollbars using React's create ref and forwardRef but it didn't work for me.

[rajivhbk]

@lsvargas any progress on this issue?

[ankeetmaini]

@rajivhbk it won't work with refs because React renders children first and then parent. By the time InfiniteScroll mounts, the parent ref would be null.

To overcome this you can use id on your DOM element. Please see a working example here https://codesandbox.io/s/r7rp40n0zm

[rajivhbk]

@ankeetmaini yes i tried that too . passing id, passing document.getElementById('id')..
didn't work for me. I'm using this component inside a sidepanel, the body of which has overflow-y: scroll , and height is calculated like : height: calc(100vh - 4.75rem) ... the body contains other components along with a table component which has a TableRows component placed inside infiniteScroll .

[ankeetmaini]

I think you're passing id to a Component which might not be passing that to DOM, try wrapping that with another div and giving it the id. I can't say for sure without a reproduce-able example.

…

On Thu, 2 Aug 2018 at 13:43 Rajiv Nayan Choudhary ***@***.***> wrote: @ankeetmaini <https://github.com/ankeetmaini> yes i tried that too . passing id, passing document.getElementById('id').. didn't work for me. I'm using this component . the body of which has overflow-y: scroll , and height is calculated like : height: calc(100vh - 4.75rem) ... the body contains other components along with a table component which has a TableRows component placed inside . — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#62 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWDl-_7XsRQ7w4N4mQ4TMZYjNFA0Rchks5uMrSRgaJpZM4UPmhf> .

[rajivhbk]

i passed it down to the div having the scrollbars as a prop from the component. i also tried giving an id directly to the div of the body component. Didn't work. It's a complicated implementation still i'll try to write an example to reproduce this.

[kumawatanupriya]

@rajivhbk Did you solve it? I am also facing the same issue, I am using react infinite scroll.

[moecantplay]

i am facing the same issue where scrollableTarget isn't working as expected.

[aakin03]

Hi, I know this issue has been closed, but are we still able to get a response?
I'm having a similar issue as many of those previously. I've set up InfinteScroll to wrap around a Table. InfinteScroll & Table are located inside of a TableContainer component. The TableContainer has an id which I used as the scrollableTarget in InfinteScroll. In my main page, my table scrolls as expected with more data loading when I pass the threshold. However, when I try to use my table in a Dialog, InfinteScroll no longer works. When I scroll, I'm not reaching my next function. How can InfinteScroll work while on a main window, but not when in a Dialog?

[missingone6]

Hello, have you solved it yet

[shurintou]

@aakin03 Hi, I'm facing same issue just as you mentioned, that scrollableTarget is not working while in a Dialog. (In my case I use Ant design Modal), have you solved this issue yet?

[osamamammar]

@aakin03 Hi, I'm facing same issue just as you mentioned, that scrollableTarget is not working while in a Dialog. (In my case I use Ant design Modal), have you solved this issue yet?

same problem have you solved it I'm using ant design Modal also

[murilooon]

Same problem inside an Ant design Drawer component 😞

same issue for me too:
here is my code:
<Grid container spacing={3} id='scrollableDiv' style={{ height: 1000, overflow: 'auto' }}>
<InfiniteScroll
dataLength={postData.length}
next={fetchData}
inverse={true}
hasMore={true}
loader={

Loading...

}
scrollableTarget='scrollableDiv'

    >
      {isLoading ? (
        <Typography variant='h6'>Loading...</Typography>
      ) : postData ? (
        postData.map(post => (
          <Grid item key={post.id}>
            <Card style={{ margin: '8px' }}>
              <CardContent>
                <Typography variant='h6'>{post.title}</Typography>
                <Typography variant='body2'>{post.body}</Typography>
              </CardContent>
            </Card>
          </Grid>
        ))
      ) : (
        <Typography variant='h6'>No data available</Typography>
      )}
    </InfiniteScroll>
  </Grid>