onScroll is not working after React 18 upgrade

Question

The onScroll callback(scrollHandler) is not getting called while scrolling. This issue is happening after we upgraded to react 18 from react 16.

Package details

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-virtualized": "^9.13.0",

Code snippet

const TableComponent = (props) => {
  let { scrollHandler, getRow, width, height, rowCount, rowHeight, getRow } = props;

  return (
    <div
      onScroll={scrollHandler}
    >
      <AutoSizer>
        {({ width, height }) => {
          return (
            <List
              width={width}
              height={height}
              rowCount={rowCount}
              rowHeight={rowHeight}
              rowRenderer={getRow}
              columnWidth={150}
              style={{ maxHeight: maxHeight }}
            />
          );
        }}
      </AutoSizer>
    </div>
  );
};

I tried to directly add in the autosizer. I tried to add in the eventListener using ref to the tag. But none it worked. Is there anyways to make onScroll work ?

Answer 1

Here is the sandbox code you asked for:

import React, { useEffect, useRef } from 'react';
import { AutoSizer, MultiGrid } from "react-virtualized";
import styles from "./ScrollSyncExample.css";

export default () => {
  const [state] = React.useState({
    fixedColumnCount: 1,
    fixedRowCount: 1,
    scrollToColumn: 0,
    scrollToRow: 0,
  });
  const divRef = useRef(null);
  const _cellRenderer = ({ columnIndex, key, rowIndex, style }) => {
    return (
      <div className={styles.Cell} key={key} style={style}>
        {rowIndex === 0 ? (
          `Header: ${columnIndex}- ${rowIndex}`
        ) : (
          <span>{`${columnIndex} - ${rowIndex}`}</span>
        )}
      </div>
    );
  };

  const handleScroll = (scrollInfo) => {
    var scrollLeft = scrollInfo.scrollLeft;
    var scrollTop = scrollInfo.scrollTop;
    console.log("Scroll Left:", scrollLeft, "Scroll Top:", scrollTop);
    // Perform any other actions you want to do on scroll.
  };

  return (
    <div>
      <AutoSizer disableHeight>
        {({ width }) => (
          <MultiGrid
            {...state}
            cellRenderer={_cellRenderer}
            columnWidth={75}
            columnCount={50}
            enableFixedColumnScroll
            enableFixedRowScroll
            height={300}
            rowHeight={70}
            rowCount={100}
            width={width}
            hideTopRightGridScrollbar
            hideBottomLeftGridScrollbar
            hideBottomRightGridScrollbar
            onScroll={({ scrollLeft, scrollTop }) =>
              handleScroll({ scrollLeft, scrollTop })
            }
          />
        )}
      </AutoSizer>
    </div>
  );
};

Sandbox sample here

Answer 2

Have you tried adding overflow: 'scroll' to your parent div style where onScroll prop have been set?

Answer 3

You can try an event listener if 'onscroll' is not working.

  useEffect(() => {
  const handleScroll = event => {
    console.log('hello scroll listener', event);
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
  }, []);

This code will add a listener to your window and trigger your 'handleScroll' function when the window is scrolled.