scrollableTarget not trigger

Hi !! I am having some trouble with scrollableTarget prop. When I set the prop, the next function never gets triggered. It seems that I am doing something wrong but I can’t see what …

Here is some part of my code:

<Grid.Column width={11} id='billList' className='bill-content fdx-content bill-list-container'>
              <InfiniteScroll
                dataLength={this.props.bills.length} //This is important field to render the next data
                next={this.loadBills}
                scrollableTarget={document.getElementById('billList')}
                onScroll={()=> {console.log(document.getElementById('billList'))}}
                hasMore={this.state.hasMore}
                loader={<Loader status={this.props.isFetching} />}
                endMessage={
                  <p style={{textAlign: 'center'}}>
                    <b>Yay! You have seen it all</b>
                  </p>
                }>
                  <BillList
                    localId={local.id}
                    token={token}
                    getBills={getBills}
                    openSidebar={this.openSidebar}
                    isSidebarOpen={isSidebarOpen}
                    bills={this.props.bills}
                  />
                </InfiniteScroll>
            </Grid.Column>

I have a ‘Grid’ parent div which has billList as ID. This means that the InfiniteScroll is not working with the div scroll. Besides, if I set a particular height to the InifniteScroll component the onScroll function logs all actions.

I have also looked for some examples with the scrollableTarget option working, but it seems that there is any one in the repo.

I hope you can help me !!

Guido

[ankeetmaini]

Please find a working sample here https://codesandbox.io/s/r7rp40n0zm

Instead of passing the node reference like document.getElementById("some-div") just pass the id of the DOM element.

[ankeetmaini]

No no, so giving an id to Grid.Column will not work, id should be on a DOM node. Grid.Column won’t set id to any element. So when InfiniteScroll component does document.getElementById(‘billList’) it’ll not get anything.

Can’t you pass a height, or let the scroll happen at the window?

On Thu, 17 May 2018 at 18:01 Guido [e-mail] wrote:

Yes

<Grid.Column width={11} id=‘billList’ className=‘bill-content fdx-content bill-list-container’> <InfiniteScroll dataLength={this.props.bills.

length} //This is important field to render the next data next={this.loadBills} scrollableTarget=“billList” hasMore={this.state.hasMore} loader={<Loader status={this.props.isFetching} />}> <BillList localId={local.id} token={token} getBills={getBills} openSidebar={this.openSidebar} isSidebarOpen={isSidebarOpen} bills={this.props.bills} /> </InfiniteScroll> </Grid.Column>

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/ankeetmaini/react-infinite-scroll-component/issues/59#issuecomment-389849721, or mute the thread https://github.com/notifications/unsubscribe-auth/AGWDl6hOFrJ9yZEb_bXGKQqMtQu0RTipks5tzW2NgaJpZM4T6QeI .