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

Question

我正在使用反应虚拟化的WindowScroller和CellMeasurer来滚动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） - window＆＃34; scroll＆＃34;事件未到达WindowScroller。这是因为window实际上不是可滚动的，而是它的中间＆＃34;身体＆＃34;部分。如果这就是您想要的，那么您根本不需要使用WindowScroller并将其删除。

唯一遗漏的是AutoSizer未获得有效身高，因为其中一位父<div> s的身高不正确。对于Stack Overflow方便，请参阅相关位：

  

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

     

AutoSizer展开以填充其父级，但不会延伸父级。这样做是为了防止Flexbox布局出现问题。如果AutoSizer报告的高度（或宽度）为0-那么父元素（或其中一个父元素）的高度可能为0.一种简单的方法是测试父类的样式属性（例如background-color: red;）以确保它是正确的大小。 （例如，您可能需要将height: 100%或flex: 1添加到父级。）

Here is a diff到您的沙盒中，显示我正在谈论的内容和here is a fixed Code Sandbox demo。