使用带有冻结页眉和页脚的 react-virtualized Window Scroller

Question

我正在使用带有 CellMeasurer 的 react-virtualized WindowScroller 来滚动 100 个样本记录，并且它本身效果很好。

现在，当我将此组件放置在其上方和下方具有冻结页眉和页脚（使用 flex）的内容窗格中时，react-virtualized 不会引入除第一页之外的其他数据。

我的容器页面的结构与 create-react-app 模板相同：

<div className="App">
    <div className="App-header" />
    <div className="App-intro" />
    <div className="App-footer" />
</div>

这是我用来冻结页眉和页脚的 CSS：

html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.App {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.App-header, .App-footer {
    flex-shrink: 0;
}
.App-intro {
    flex-grow: 1;
    overflow-y: auto;
}

FWIW，官方的 WindowScroller 示例使用 flex 完成了一个冻结的标题，但尽我所能，我无法复制它。

在花了一整天的时间之后，我的智慧已经结束了。我真的很感激任何让这个 flex 布局与功能性窗口滚动条一起使用的指针。

Answer 1

在您链接到的 CodeSandbox (codesandbox.io/s/52j0vv936p)- 窗口“滚动”事件没有到达WindowScroller。那是因为window实际上并不是可滚动的，而是中间的“主体”部分。如果这就是你想要的，你根本不需要使用WindowScroller，应该删除它。

剩下的唯一问题是您AutoSizer没有获得有效的高度，因为其父<div>s 之一没有正确的高度。为了堆栈溢出的方便，这里是相关的位：

为什么我的 AutoSizer 将高度设置为 0？

AutoSizer扩展以填充其父级，但不会拉伸父级。这样做是为了防止 flexbox 布局出现问题。如果AutoSizer报告的高度（或宽度）为 0-，则父元素（或其父元素之一）的高度很可能为 0。一种简单的测试方法是向父元素添加样式属性（例如background-color: red;）以确保它是正确的尺寸。（例如，您可能需要将height: 100%或添加flex: 1到父项。）

这是您的沙箱的差异，显示了我在说什么，这是一个固定的代码沙箱演示。