React-virtualized WindowScroller滚动条显示在Table层级而非窗口层级问题排查

看起来你遇到的问题是WindowScroller没有正确接管窗口滚动，反而让Table自己显示了滚动条，这在react-virtualized 9.18.5版本里通常是几个常见配置错误导致的，我帮你梳理下问题点和解决方法：

1. 修复组件返回的隐蔽错误 #

你的代码里最容易忽略的问题：箭头函数没有返回Table组件。你用大括号{}包裹了Table，但没有写return语句，这会导致WindowScroller的子组件实际上是undefined，Table只能按照默认逻辑渲染（自己生成滚动条）。

修正方式二选一：

// 方式1：用小括号自动返回组件
<WindowScroller>
  {(scroll) => (
    <Table
      headerHeight={0}
      rowHeight={480}
      rowCount={rowsCount}
      isScrolling={scroll.isScrolling}
      scrollTop={scroll.scrollTop}
      onScroll={scroll.onChildScroll}
      rowGetter={({index}) => {/* 你的rowGetter逻辑 */}}
      height={props.size.height}
      width={props.size.width}
    >
      {/* 你的列定义 */}
    </Table>
  )}
</WindowScroller>

// 方式2：显式添加return语句
<WindowScroller>
  {(scroll) => {
    return (
      <Table
        // 保持原有props不变
      />
    )
  }}
</WindowScroller>

2. 调整Table的height配置（核心问题） #

这是导致滚动条层级错误的关键原因：如果给Table设置了固定的height（比如你的props.size.height），Table会创建自己的滚动容器，完全跳过WindowScroller的窗口滚动逻辑。

WindowScroller的核心要求是：Table的高度必须等于浏览器视口的可用高度，这样它不会自己生成滚动条，而是依赖窗口滚动来驱动内容渲染。

推荐结合react-virtualized自带的AutoSizer组件来自动适配视口尺寸，同时使用WindowScroller提供的height值：

import { WindowScroller, AutoSizer, Table } from 'react-virtualized';

// ...

<WindowScroller>
  {({ height, isScrolling, scrollTop, onChildScroll }) => (
    <AutoSizer>
      {({ width }) => (
        <Table
          headerHeight={0}
          rowHeight={480}
          rowCount={rowsCount}
          isScrolling={isScrolling}
          scrollTop={scrollTop}
          onScroll={onChildScroll}
          rowGetter={({ index }) => {/* 你的rowGetter逻辑 */}}
          height={height} // 使用WindowScroller提供的视口高度
          width={width}
        >
          {/* 你的列定义 */}
        </Table>
      )}
    </AutoSizer>
  )}
</WindowScroller>

3. 确认WindowScroller的使用要求 #

除了上面的配置，还要确保满足这些条件：

• 确保Table的总内容高度（rowHeight * rowCount）大于视口高度，否则窗口不会出现滚动条。
• WindowScroller的直接父元素不能设置overflow: hidden或overflow: auto，否则会拦截窗口滚动事件，导致WindowScroller无法正常监听。
• 必须正确传递WindowScroller提供的scrollTop、isScrolling、onScroll这三个props给Table，否则两者的滚动状态无法同步。

额外检查点 #

如果问题仍存在，可以排查：

• 有没有给Table或其父元素设置overflow: auto的样式，这会强制生成组件内滚动条。
• 确认props.size.height的值是不是远小于内容总高度，如果是，Table还是会自己显示滚动条。

内容的提问来源于stack exchange，提问作者matiii