scrollToRow result is off for dynamic height list

Question

First off, let me provide a little background on my use case for react-virtualized. I am using it together with the v2.0 beta version of react-pdf in order to build a pdf viewer that can handle displaying/rendering pdf documents with a lot of pages more efficiently. An important requirement is that the pdf viewer is fully responsive and can handle documents that have pages that possibly have differing heights.

I have managed to combine both packages (there are a couple of minor react-pdf related hickups), but there are a couple of things that don't quite work like I would expect. Most noticeably, scrolling to a specific row (i.e. page) doesn't really work too well. To give an example, if I attempt to scroll to page index 81 (approximately the middle of my 152 page test pdf) from page index 0, I end up somewhere midway between the desired page and the next page. If I attempt to scroll to the last page index (p.i. 151) I end up at the next to last page.

I am using a combination of WindowScroller, AutoSizer, CellMeasurer and List to create my viewer (I have omitted parts that don't matter directly):

class Viewer extends Component {
    constructor(props) {
        super(props);

        this.state = {pdf: null, scale: 1.2};
        this._cache = new CellMeasurerCache({defaultHeight: 768, fixedWidth: true});
    }

    ...

    handleResize() {
        this._cache.clearAll();     // Reset the cached measurements for all cells
    }

    updatePageIndex(index) {
        this._cache.clearAll();
        this._list.scrollToRow(index);
    }

    rowRenderer({key, index, style, parent}) {
        return (
            <CellMeasurer cache={this._cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
                {
                    ({measure}) => (
                        <div style={style}>
                            <Page
                                onLoadSuccess={measure}
                                renderTextLayer={false}
                                pdf={this.state.pdf}
                                pageNumber={index + 1}
                                scale={this.state.scale} />
                        </div>
                    )
                }
            </CellMeasurer>
        );
    }

    render() {
        ...
        <Document
            file="./some_pdf_document.pdf"
            loading={<Loader />}
            error={this.renderError()}
            onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
        >
            <WindowScroller onResize={this.handleResize.bind(this)}>
                {
                    ({height, isScrolling, onChildScroll, scrollTop}) => (
                        <AutoSizer disableHeight>
                            {
                                ({width}) => (
                                    <List
                                        autoheight
                                        height={height}
                                        width={width}
                                        isScrolling={isScrolling}
                                        onScroll={onChildScroll}
                                        scrollToAlignment="start"
                                        scrollTop={scrollTop}
                                        overscanRowCount={5}
                                        rowCount={this.state.pdf.numPages}
                                        deferredMeasurementCache={this._cache}
                                        rowHeight={this._cache.rowHeight}
                                        rowRenderer={this.rowRenderer.bind(this)}
                                        style={{outline: 'none'}}
                                        ref={ref => this._list = ref} />
                                )
                            }
                        </AutoSizer>
                    )
                }
            </WindowScroller>
        </Document>
    }

}
...

Is what I do in updatePageIndex() correct or is there still something missing?

Answer 1

The only way I got this to work properly (i.e. scroll to the right page) was to use the scrollToIndex property of the List component. Setting that to a certain row index strangely enough does scroll to the right page.

Only problem with using scrollToIndex is that it doesn't allow you to scroll back up past the scroll index. My workaround is to set the index back to -1 after the scroll has completed. However, if I do this too quick, scrollToIndex also scrolls to the wrong row. The only way I managed to get around this is to set the index to -1 using setTimeout(). Very hacky, but it does the trick. I tried other ways using componentDidUpdate() and a promise, but none of them worked for me.

Answer 2

I think there's a misunderstanding or two above. Firstly, calling cache.clearAll() will erase all measurements- requiring CellMeasurer to recompute them all on the next render. Unless something has changed that invalidates these measurements- (which doesn't seem to be the case from your description)- then you wouldn't want to do this. This method should only be called if a measurement may be invalid due to a change like a browser width resize that might affect the height of wrapping text content, etc.

Secondly, if you do need to call cache.clearAll() then you will also want to call list.recomputeRowHeights(). CellMeasurer caches measurements (sizes) and List caches positions (offsets). This lets data be re-ordered (eg sorted) without requiring re-measurement. All that's needed after a sort is for List to recompute its positions.

Check out this code snippet from a Twitter-like demo app I built with react-virtualized for an example of how this is done.

If the above info doesn't help you resolve matters, leave a comment and a repro on CodeSandbox or similar and I'll take a look.