scrollableTarget not trigger

[gdpsysgarage]

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

[ikorgik]

Have same problems

[ankeetmaini]

I see, I debugged this and seems like by the time your component's render gets called, the element doesn't exist in the DOM. It then passes null, as scrollableTarget, because document.getElementId('some-div') doesn't return anything.

To fix this I'll add another check to see if scrollableTarget's type is string, I'll do a lookup from the DOM inside InfiniteScroll's componentDidMount.

[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.

[gdpsysgarage]

@ankeetmaini I have updated the package but when i put the scrollableTarget as a string it breaks all the webapp

<InfiniteScroll
                dataLength={this.props.bills.length}
                next={this.loadBills}
                hasMore={this.state.hasMore}
                scrollableTarget="billList"
                loader={<Loader status={this.props.isFetching} />} >
                  <BillList
                    localId={local.id}
                    token={token}
                    getBills={getBills}
                    openSidebar={this.openSidebar}
                    isSidebarOpen={isSidebarOpen}
                    bills={this.props.bills}
                  />
                </InfiniteScroll>

[ankeetmaini]

Is billList defined as an id?

On Thu, May 17, 2018, 12:47 AM Guido notifications@github.com wrote:

@ankeetmaini https://github.com/ankeetmaini I have updated the package but when i put the scrollableTarget as a string it breaks all the webapp

<InfiniteScroll dataLength={this.props.bills.length} next={this.loadBills} hasMore={this.state.hasMore} scrollableTarget="billList" loader={} > <BillList localId={local.id} token={token} getBills={getBills} openSidebar={this.openSidebar} isSidebarOpen={isSidebarOpen} bills={this.props.bills} />

[image: error] https://user-images.githubusercontent.com/37113788/40138904-86d69780-5924-11e8-9e21-56db79f953ba.png

— 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-389634624, or mute the thread https://github.com/notifications/unsubscribe-auth/AGWDl68DQlnJoEZDAm2nSxK17cD4W-4vks5tzHtKgaJpZM4T6QeI .

[gdpsysgarage]

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>

[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 notifications@github.com wrote:

Yes

}> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or mute the thread .

[gdpsysgarage]

Yes you are right. If I put the ID in a Grid element it doesnt works. But if I change it to a div it works. Thanks for your work :1st_place_medal:

[Linch1]

Hello thanks for this plugin, i have a question.

what if the infinite-scroll-component is rendered inside a shadow dom and also the scollableTarget is in the shadow dom?

If the id of the scollableTarget is passed then the id is relative to the shadow dom and not the main document, so calling document.getElementById("Myid") will result in null, instead if done inside the shadow dom the element is found.

there is a way to pass a ref to the component instead than the id, on an html element ?

[iwgyyyy]

Hello thanks for this plugin, i have a question.

what if the infinite-scroll-component is rendered inside a shadow dom and also the scollableTarget is in the shadow dom?

If the id of the scollableTarget is passed then the id is relative to the shadow dom and not the main document, so calling document.getElementById("Myid") will result in null, instead if done inside the shadow dom the element is found.

there is a way to pass a ref to the component instead than the id, on an html element ?

In fact, you can copy the component into your code and then replace document.getElementById with your own code.