Ytukyg

I have a problem when using react virtualized with react custom scrollbars

this is my cod:

<Scrollbars

                className="custom__scrollbars"

                height={ this.state.windowHeight - 54 }

                ref="conversationlistscroll"

                renderThumbVertical={props => <div {...props} className="c-scrollbar__bar"/>}

                renderTrackVertical={props => <div {...props} className="c-scrollbar__track"/>}

                renderTrackHorizontal={props => <div {...props} className="track-horizontal" style={{display:"none"}}/>}

                renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" style={{display:"none"}}/>}

                autoHide

                autoHideTimeout={ 1000 }

                autoHideDuration={ 200 }

                onScroll={ this.handleScroll }

                >

                { this.renderInfiniteList() }

            </Scrollbars>



renderInfiniteList() {

    const conversations = this.props.conversations || ;

    const listStyle = {

      overflowX: false,

      overflowY: false,

    };

    return(



        <InfiniteLoader

            isRowLoaded={this.isRowLoaded}

            height={ this.state.windowHeight - 54 }

            loadMoreRows={this.handleInfiniteLoad}

            rowCount={conversations.length + 1}

          >

          {({onRowsRendered, registerChild}) => (

              <AutoSizer disableHeight>

                    {({ width }) => (

                        <List

                            ref={instance => (this.List = instance)}

                            onRowsRendered={onRowsRendered}

                            rowCount={conversations.length + 1}

                            rowHeight={80}

                            rowRenderer={this.rowRenderer}

                            width={width}

                            height={ this.state.windowHeight - 54 }

                            style={listStyle}

                          />

                        ) }

            </AutoSizer>

            )}

          </InfiniteLoader>

    )

}

This is problem

InfiniteLoader has loaded ok, every time I scroll to bottom

but only render 20 first items
Can anyone tell me how to fix this
thanks you very much

sorry, this is handleScroll function

handleScroll = ({ target }) => {

    const { scrollTop, scrollLeft } = target;

    const { Grid: grid } = this.List;

    grid.handleScrollEvent({ scrollTop, scrollLeft });

}