使用带有冻结页眉和页脚的 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，the official WindowScroller example 使用 flex 完成了一个冻结的标头，但尽我所能，我无法在我的最后复制它。

在这件事上花了一整天之后，我已经束手无策了。我真的很感激任何让这个 flex 布局与功能性窗口滚动器一起使用的指针。

Answer 1

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

剩下的唯一问题是您的AutoSizer 没有获得有效的高度，因为它的父<div>s 之一没有正确的高度。为方便 Stack Overflow，以下是相关位：

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

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

Here is a diff 到你的沙箱，显示我在说什么和here is a fixed Code Sandbox demo。