ScrollSync doesn't seem to sync correctly/fast enough

After setting up a ScrollSync with three grids (similar to the ScrollSync example) I realized that in both cases (ScrollSync example and my own code), the headers don’t sync up to the main grid. It always shows a slight delay. I read somewhere that this could be fixed by putting a canvas on top of the grid, but that didn’t work for me.

See how the Description doesn’t align with the rest of the content?

import * as React from 'react'
import {AutoSizer, InfiniteLoader, FlexColumn, FlexTable, Grid, ScrollSync} from 'react-virtualized'
const classes: any = require('./InfiniteTable.scss')

interface Props {
  model: any
}

export default class InifiniteTable extends React.Component<Props, {}> {
  list = [
      { name: 'Brian Vaughn', description: 'Software engineer', loaded: false },
      { name: 'John Doe', description: 'PM', loaded: false },
  ];

  constructor() {
    super()
    for (let i = 0; i < 100; i++) {
      this.list.push({ name: 'John Doe', description: 'PM', loaded: false })
    }
  }

  loadMoreRows = ({startIndex, stopIndex}) => {
    console.log(`loading more rows ${startIndex} - ${stopIndex}`)
    return new Promise(
      (resolve) =>
          setTimeout(() => {
            for (let i = startIndex; i < stopIndex; i++) {
              this.list[i].loaded = true
            }
            resolve(this.list.slice(startIndex, stopIndex))
          }, 1000)
    )
  }

  renderCell = ({rowIndex, columnIndex}) => {
    let value;
    if (this.list[rowIndex].loaded) {
      value = columnIndex === 0 ? this.list[rowIndex].name : this.list[rowIndex].description
    } else {
      value = 'loading'
    }
    return (
      <div style={{display: 'flex', alignItems: 'center', height: 30}}>
        {value}
      </div>
    )
  }

  render() {
    return (
      <div style={{height: '100%'}}>
        <canvas style={{position: 'absolute', top: 0, width: '100%', height: '100%', pointerEvents: 'none'}}>

        </canvas>
        <InfiniteLoader
          rowCount={this.list.length}
          isRowLoaded={({index}) => this.list[index].loaded}
          loadMoreRows={this.loadMoreRows}
          >
          {({onRowsRendered, registerChild}) => (
          <ScrollSync>
            {({clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth}) =>
            <div style={{display: 'flex', flexDirection: 'row', height: '100%'}}>
              <div style={{display: 'flex', flexDirection: 'column'}}>
                <div style={{marginTop: 30}}>
                  <Grid
                    className={classes.sideContainer}
                    cellRenderer={({rowIndex}) => <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: 30}}>{rowIndex + 1}</div>}
                    columnWidth={30}
                    columnCount={1}
                    height={clientHeight}
                    rowHeight={30}
                    rowCount={this.list.length}
                    scrollTop={scrollTop}
                    width={30}
                  />
                </div>
              </div>
              <AutoSizer>
                {({width, height}) => (
                <div>
                  <Grid
                    className={classes.headerContainer}
                    columnWidth={({index}) => index === 0 ? width * 0.8 : width * 0.5}
                    columnCount={2}
                    height={30}
                    cellRenderer={({columnIndex}) => columnIndex === 0 ? 'Name' : 'Description'}
                    rowHeight={30}
                    rowCount={1}
                    scrollLeft={scrollLeft}
                    width={width}
                  />
                  <Grid
                    ref={registerChild}
                    width={width}
                    height={height}
                    onRowsRendered={onRowsRendered}
                    headerHeight={30}
                    onScroll={onScroll}
                    rowHeight={30}
                    columnCount={2}
                    columnWidth={({index}) => index === 0 ? width * 0.8 : width * 0.5}
                    rowCount={this.list.length}
                    cellRenderer={this.renderCell}
                    rowGetter={({index}) => this.list[index].loaded ? this.list[index] : ({name: 'loading', description: 'loading'})}
                    >
                  </Grid>
                </div>
                )}
              </AutoSizer>
            </div>
            }
          </ScrollSync>
          )}
        </InfiniteLoader>
      </div>
    )
  }
}

[NexxLuo]

I remove the will-change style，it works. Although it scroll not smoothly as before,but it better than use mousewheel event.

There is a demo. https://codesandbox.io/s/react-window-scroll-sync-044m2?fontsize=14&hidenavigation=1&theme=dark

[thielium]

I acknowledge that this has been closed for many moons, but for the faint of heart who are worried they will never be able to get around this bug: if you get a ref to the elements you want to sync up, you can add mousewheel event listeners, prevent default, and manage the scrolling yourself. For vertical scroll, it’s something like:

mainGridRef.addEventListener('mousewheel', e => {
  e.preventDefault();
  const scrollTop = mainGridRef.scrollTop + e.deltaY;
  mainGridRef.scrollTop = scrollTop;
  frozenColumnRef.scrollTop = scrollTop;
});

You’re basically disabling smooth scrolling and swapping in scrolling which acts much more like dragging the scrollbar.

I’ll update with cleaner example code if I get a chance (and I’d love to ditch the refs entirely), but I wanted to make sure the partial solution was recorded to empower whatever hero ends up coming up with a total solution.

---

Inspiration from stackoverflow