React 18升级后onScroll回调函数无法触发的问题求助

问题根源 #

你外层的div并没有实际的滚动行为——react-virtualized的List组件内部会自行创建一个带滚动条的容器，所有滚动事件都发生在这个内部容器上，所以监听外层div的onScroll自然不会触发。

解决方案 #

直接给List组件添加onScroll属性，把你的scrollHandler传递进去即可：

修改后的代码示例 #

const TableComponent = (props) => {
  // 注意：原代码重复解构了getRow，已移除重复项
  const { scrollHandler, getRow, width, height, rowCount, rowHeight } = props;

  return (
    <div>
      <AutoSizer>
        {({ width, height }) => (
          <List
            width={width}
            height={height}
            rowCount={rowCount}
            rowHeight={rowHeight}
            rowRenderer={getRow}
            columnWidth={150}
            style={{ maxHeight: maxHeight }}
            onScroll={scrollHandler} // 直接给List绑定滚动回调
          />
        )}
      </AutoSizer>
    </div>
  );
};

补充说明 #

• 如果你需要获取滚动细节（比如滚动位置、方向），List的onScroll回调会接收包含scrollTop、scrollLeft等属性的参数，可在scrollHandler中直接使用。
• 给AutoSizer加onScroll无效是因为它只是尺寸自适应包装组件，不负责滚动逻辑；外层div没有滚动条，自然不会触发滚动事件。

内容的提问来源于stack exchange，提问作者Thalariventhan K R