Use react-virtualized Window Scroller with frozen header and footer

Question

I am using react-virtualized WindowScroller with CellMeasurer to scroll through a 100 sample records and by itself, it works great.

Now, when I place this component in a content pane with a frozen header and footer (using flex) above and below it, react-virtualized does not bring in additional data beyond the first page.

The structure of my container page is the same as the create-react-app template:

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

and here is the CSS I use to freeze the header and footer:

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 accomplishes a frozen header using flex, but try as I might, I am not able to replicate it on my end.

I am at my wit's end after spending a whole entire day on this. I would really really appreciate any pointers to get this flex layout going with a functional window-scroller.

Answer 1

In the CodeSandbox you linked to (codesandbox.io/s/52j0vv936p)- window "scroll" events aren't reaching WindowScroller. That's because the window isn't actually what's scrollable, rather it's the middle "body" part. If that's what you want, you don't need to use WindowScroller at all and should remove it.

The only thing left that's broken is that your AutoSizer isn't getting a valid height because one of its parent <div>s doesn't have a correct height. For Stack Overflow convenience, here's the relevant bit:

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.