React Virtualized - how to scroll to div within row with dynamic height

问题

I'm using RV List to load a large document with custom formatting. It has worked like a charm, but I am running into the following 2 issues:
I currently set up a list within a cellmeasurer based on this to calculate the dynamic heights of rows (width is fixed). I managed to use scrollToindex to find the row I want, but some rows are quite large and I want to be able to scroll to a specific place within the row. I understand that I need to use scrollTop to do so, but I don't know how to get the current row's top + the offset of the div within the row to make it correctly scroll to the right position. I saw an answer to a similar question where the following code was posted:

function render ({ scrollToIndex, ...rest }) {
// Convert scrollToIndex to scrollStop
const scrollTop =
  **rowOffset** + // Position of row within List
  **innerOffset** // Position of inner target within row

Here is my code:

<AutoSizer>
            {({ width, height }) => (
              <CellMeasurer
                cellRenderer={({index, isScrolling, style, key  }) => SectionRenderer(index, key, style)}
                columnCount={1}
                rowCount={getSectionCount}
                width={width}
                >
                {({ getRowHeight }) => (
                  <List
                    height={height}
                    rowHeight={getRowHeight}
                    rowCount={getSectionCount}
                    rowRenderer={({ index, isScrolling, style, key  }) => SectionRenderer(index, key, style)}
                    overscanRowCount={10}
                    width={width}
                    scrollToIndex={scrollToSectionIndex}
                    />
                )}
              </CellMeasurer>
            )}
</AutoSizer>

Another issue that I have faced is that although I split the document into chunks which each end with a tag in order to ensure smoothe flow (no overlap) of the text, for some reason there are some points in the text where the cell measurer ignores the hieght of the last line of text of the rows div causing an overlap.I haven't yet managed to find a consistent pattern as to where the overlap occurs within the list. Do you have any pointers how I can debug this issue: eg. measure a given section in isolation and compare it with the measurements that are returned from CellMeasurer?

回答1:

The first half of your question is a little tricky. You could get a hanlde on the inner SizeAndPositionManager (used to manage row sizes) and query it for more exact offset information. The least hacky way of doing that would be to use the cellRangeRenderer callback, roughly like so:

import { defaultCellRangeRenderer, Grid } from 'react-virtualized'

class GridWrapperExample extends Component {
  constructor (props, context) {
    super(props, context)

    this._cellRangeRenderer = this._cellRangeRenderer.bind(this)
  }

  render () {
    return (
      <Grid
        cellRangeRenderer={this._cellRangeRenderer}
        {...this.props}
      />
    )
  }

  _cellRangeRenderer (props) {
    this._rowSizeAndPositionManager = props.rowSizeAndPositionManager

    return defaultCellRangeRenderer(props)
  }
}

My guess about the slight text overlap issue is that it might be a related to inherited styles. Taken from the docs:

Cells may be measured outside of the context of their intended Grid (or List). This means that they will not inherit the parent styles while being measured. Take care not rely on inherited styles for things that will affect measurement (eg font-size). (See issue 352 for more background information.)

Certain box-sizing settings (eg box-sizing: border-box) may cause slight discrepancies if borders are applied to a Grid whose cells are being measured. For this reason, it is recommended that you avoid placing borders on a Grid that uses a CellMeasurer and instead style its parent container. (See issue 338 for more background information.)

来源：https://stackoverflow.com/questions/41109604/react-virtualized-how-to-scroll-to-div-within-row-with-dynamic-height

标签

react-virtualized