React-Virtualized ScrollSync: How to set an initial scrollTop value?

Question

I'm using the react-virtualized ScrollSync component to sync the scrolling of a couple fixed headers — very similar to the example in the docs.

My question: is it possible to provide an initial scrollTop value to ScrollSync (or its children)? I realize that the better way to do this would be through use of scrollToRow on the Grid component that controls the scroll position — for what it's worth, I am using scrollToColumn for this purpose. But because, vertically, I'm only rendering one very tall cell, scrollToRow doesn't provide the fidelity needed.

I do realize that this is a slightly bastardized use of a grid component, but it all works quite nicely as a horizontal, infinitely loading scroller, while allowing me to re-use an existing component. If I could just set an initial scrollTop, I'd be golden.

Thanks.

Also, this is slightly different than [this question](http://stackoverflow.com/questions/39920938/how-to-scroll-to-index-in-deeply-hierarchical-list-in-react-virtualized) because `ScrollSync` is already providing `scrollTop` to the grid component in my case — I need a way to provide an initial value only. Nonetheless, the answer may be helpful. — Matt Martin, Nov 30 '16 at 00:50

score 4 · Accepted Answer · answered Nov 30 '16 at 05:26

Unfortunately this is not currently supported without a bit of a hack.

First, the reason for the hack: Scroll offsets flow in one direction with ScrollSync (main Grid to synchronized Grids). This means that even if ScrollSync accepted default left/top offsets as props- they would get overridden by the first render of the main Grid. I think this is probably the right thing to do to avoid ugliness inside of react-virtualized.

However you could work around it in application code like this if you wanted to:

class YourComponent extends Component {
  render () {
    // These are arbitrary
    const defaultScrollLeft = 300
    const defaultScrollTop = 500

    return (
      <ScrollSync>
        {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => {
          if (!this._initialized) {
            scrollLeft = defaultScrollLeft
            scrollTop = defaultScrollTop

            this._initialized = true
          }

          return (
            <div>
              <Grid
                {...otherSyncedGridProps}
                scrollLeft={scrollLeft}
              />
              <Grid
                {...otherMainGridProps}
                onScroll={onScroll}
                scrollLeft={defaultScrollLeft}
                scrollTop={defaultScrollTop}
              />
            </div>
          )
        }}
      </ScrollSync>
    )
  }
}

Yeah, I actually ended up doing precisely this late last night. Thanks for the quick response — good to know the hack is needed! — Matt Martin, Nov 30 '16 at 21:16

React-Virtualized ScrollSync: How to set an initial scrollTop value?

1 Answers1