Невозможно прокрутить последний дочерний элемент с помощью ScrollSync с несколькими сетками и коллекциями

Не на 100% уверен, в чем подвох, но я считаю, что это потому, что каждый дочерний компонент Grid, Collection... имеет свой собственный ReactVirtualized__Collection__innerScrollContainer, который имеет разную ширину, и только самый последний в дереве DOM фактически прокручивается/видим. Игра с z-индексом компонентов подтверждает это.

Да. Это не что-то конкретное для реакции-виртуализации. Если вы сложите несколько прокручиваемых элементов DOM, только самый верхний будет получать события прокрутки. Вы можете разрешить событиям проходить через самый верхний элемент, используя pointer-events: none, но вы по-прежнему будет иметь только один элемент, получающий события прокрутки.

Если вы хотите координировать прокрутку нескольких элементов, это можно сделать, поместив их все в прокручиваемый контейнер. Конечно, это сложнее сделать с такой библиотекой, как react-virtualized, но... глядя на картинки, которые вы вставили, я бы предположил, что вам на самом деле могут не понадобиться два Collection. Вместо этого вам может сойти с рук использование Grid и предоставление собственного пользовательского cellRangeRenderer, который можно использовать для отображения пользовательского интерфейса наложения. (Это то, что было доступно для обработки свойства.) Это также будет работать лучше, потому что Grid работает лучше, чем Collection (а 1 компонент обычно работает лучше, чем 3).

Вот примерный план того, что я предлагаю:

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

function cellRangeRenderer (props) {
  // Use the default cellRangeRenderer to render your Grid's cells
  // No need to re-implement that
  const children = defaultCellRangeRenderer(props)

  // cellRangeRenderer is passed params representing the Grid's current offset
  // Use these to decide what Collection items you should display
  const { scrollLeft, scrollTop } = props

  // Add the additional items you were putting into the Collection
  // They were just absolutely positioned elements anyway so treat them the same
  children.push(
    <div style={...}>This could be a Collection cell</div>
  )

  // NOTE If you think your Grid will be larger than 1.5M pixels,
  // You will also need to account for compression, see:
  // https://github.com/bvaughn/react-virtualized/blob/eb50a1569c8a59ec3d296145b636dff4b24ccae8/source/Grid/defaultCellRangeRenderer.js#L77-L83

  return children
}

function YourGrid (props) {
  return (
    <Grid
      cellRangeRenderer={cellRangeRenderer}
      {...props}
    />
  )
}

Я пришел со следующим решением. По сути, это пользовательский компонент Scroller, который оборачивает все прокручиваемые компоненты и устанавливает ширину и высоту всех прокручиваемых компонентов с высотой и шириной наибольшего из них.

<Scroller
    width={width}
    height={height}
    leftOffset={100}
    totalWidth={totalWidth}
    totalHeight={totalHeight}
    scrollTop={scrollTop}
    scrollLeft={scrollLeft}
    onScroll={onScroll}
>
    <div className="Body">
        <div className="BodyPart">
            <Grid
                className="BodyGrid"
                width={totalWidth}
                height={totalHeight}
                columnWidth={columnWidth}
                columnCount={columnCount}
                rowHeight={rowHeight}
                rowCount={rowCount}
                overscanColumnCount={overscanColumnCount}
                overscanRowCount={overscanRowCount}
                cellRenderer={this.renderBodyCell}
                scrollTop={scrollTop}
                scrollLeft={scrollLeft}
            />
        </div>
        <div className="BodyPart">
            <Routes
                startTime={startDate.getTime()}
                routes={Object.values(routes)}
                courierIds={courierIds}
                height={totalHeight}
                width={totalWidth}
                rowHeight={rowHeight}
                columnWidth={columnWidth}
                scrollTop={scrollTop}
                scrollLeft={scrollLeft}
            />
        </div>
    </div>
</Scroller>

Демонстрация: https://jsfiddle.net/mauron85/97dj3baq/