如何使用视图而不是组件的滚动条使react窗口FixedSizeList滚动？

Question

我正在尝试集成react-window的FixedSizeList和FixedSizeGrid组件，以提高页面的初始呈现速度。是否有办法让用户使用视图的滚动区域向下滚动react-window组件?我还想知道是否有办法从react-window组件中删除滚动条，并且只使用视图的滚动。

我尝试将文档版本的FixedSizeList集成到我的页面中，如您所见，因为我的所有行的总高度都大于我在组件中指定的高度，所以出现了组件旁边的垂直滚动条，我想删除它。我也不知道如何让视图端口向下滚动，使react-window组件向下滚动其其余的行。

从线上看，我想我可能需要修改FixedSizeList的CSS样式，让overflow:hidden删除滚动条，但是如何确保保持滚动功能，并确保用户可以从视图端口的任何位置向下滚动组件？

无反应窗口的当前版本

FixedSizeList版本

  const Row = ({ index, style }) => (
    <div style={style}>Row {index}</div>
  );

  <FixedSizeList
      height={500}
      itemCount={38}
      itemSize={35}
      width={"100%"}
    >
      {Row}
  </FixedSizeList>

Answer 1

一种解决方案是使用一个从react窗口github页面链接的包，名为反应虚拟化自动筛选器。它也是由bvaughn，是一个很好的解决方案的问题。

这解决了这个问题，允许您将FixedSizedList的高度设置为其内容的高度，这样它就不会得到滚动条。如下所示：

  <AutoSizer>
    {({ height, width }) => (
      <FixedSizeList
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </FixedSizeList>
    )}
  </AutoSizer>

下面是关于代码框的完整示例：

​