使用 react-window 将组件附加到固定列表？

Question

我有一个固定的列表和网格，使用react-window、infinite loader和auto sizer。它工作正常，但我希望在列表/网格开始之前附加一个组件（例如，搜索框和按钮）。实现这一目标的正确方法是什么？我希望这个组件与固定列表一起滚动而不是单独滚动。我之前只是渲染组件已经厌倦了，但是它不在固定列表容器中并且不会随它滚动。

{/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
{/* CAN'T IN HERE BECAUSE ITS NOT INSIDE THE FIXED CONTAINER SO IT SCROllS SEPARATELY */}
<AutoSizer>
    {({ height, width }) => (
        <InfiniteLoader
            isItemLoaded={index => index < stateData.data.length}
            itemCount={stateData.data.length + 1}
            loadMoreItems={loadMoreProducts}
        >
            {({ onItemsRendered, ref }) => (
                <FixedSizeList
                    onItemsRendered={onItemsRendered}
                    ref={ref}
                    height={height}
                    itemCount={stateData.data.length + 1}
                    itemSize={350}
                    width={width}
                >
                    {/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
                    {/* CAN'T IN HERE BECAUSE ITS LOOPING LISTITEM */}
                    {ListItem}
                </FixedSizeList>
            )}
        </InfiniteLoader>
    )}
</AutoSizer>

编辑：我几乎不希望列表（或网格）和实际页面是两个不同的滚动容器。我希望整个页面一起滚动。我遇到了这个问题，因为我的一些容器需要有一个无限的用户可以滚动的项目列表，因此需要对列表进行虚拟化以提高性能。

在此处查看演示。实际上，固定容器应该被视为整个页面和搜索框，其他所有内容都应该随无限列表滚动。拥有两个不同的滚动容器对于用户体验来说并不是太好。

Answer 1

如果您希望整个页面与虚拟列表一起滚动，您将需要一个窗口滚动器。这还涉及到尝试一些样式。要使搜索框随列表滚动，您需要固定位置。间隔 div 和一些样式有助于产生幻觉。

我在此处为您的 codepen 添加了一个基本的窗口滚动条和一些样式更改。