使用 react-virtualized Window 带有冻结 header 和页脚的滚动条

Question

我正在使用 react-virtualized WindowScroller 和 CellMeasurer 滚动浏览 100 条样本记录，它本身效果很好。

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

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

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

这是我用来冻结 header 和页脚的 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 完成了冻结 header，但尽我所能，我无法复制它。

在为此花了一整天之后，我已经束手无策了。我真的很感激任何让这个 flex 布局与功能 window-scroller 一起使用的指示。

Answer 1

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

唯一的问题是您的 AutoSizer 没有得到有效的高度，因为它的父 <div> 之一没有正确的高度。为了 Stack Overflow 的方便，这里是相关位：

Why is my AutoSizer setting a height of 0?

AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)

Here is a diff to your sandbox that shows what I'm talking about and here is a fixed Code Sandbox demo.

使用 react-virtualized Window 带有冻结 header 和页脚的滚动条

Use react-virtualized Window Scroller with frozen header and footer

flexbox

react-virtualized