如何使React-window使用视口固定式卷轴，而不是组件的滚动条？

发布于 2025-02-09 11:40:19 字数 1029 浏览 2 评论 0 原文

我正在尝试集成 react-window 's recizeSizelist 和 reciedsizegrid 组件以提高我页面的初始渲染速度。我有什么办法让用户使用视口滚动区域滚动 react-window 组件？我也是想知道是否有某种方法可以从 react-window 组件中删除滚动条，并且仅使用我所描述的视口滚动。

我尝试将固定的Sizelist 的文档版本集成到我的页面中，并且您可以看到，因为我所有行的总高度大于我在组件中指定的高度，因此该组件旁边的垂直滚动条出现，我想删除。我也无法弄清楚如何让视口上向下滚动使 react-window 组件滚动其其余行滚动。

通过在线查找，我认为我可能需要修改固定的sizelist 的CSS样式以使溢出：hidden 以删除滚动条，但是我如何确保我保持滚动滚动功能，用户可以从视口中的任何地方滚动组件？

当前版本，没有react-window

固定的sizelist版本

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

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

原文

I am trying to integrate react-window's FixedSizeList and FixedSizeGrid components to increase the initial rendering speed of my page. Is there some way for me to let the user scroll down the react-window component using the viewport's scrolling area? I was also
wondering if there is some way to remove the scrollbar from the react-window component and only use the viewport's scrolling as I described above.

I tried integrating the documentation version of FixedSizeList into my page and as you can see, since the total height of all my rows is greater than the height I specified in the component so the vertical scrollbar beside the component appears, which I want to remove. I also cannot figure out how to let scrolling downwards on the viewport make the react-window component scroll down the rest of its rows.

From looking online, I think I might need to modify the CSS style of the FixedSizeList to have overflow:hidden to remove the scrollbar but how can I ensure that I keep the scrolling functionality and that the user can scroll down the component from anywhere in the viewport?

Current version with no react-window

FixedSizeList version

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帥小哥 2025-02-16 11:40:19

一种解决方案是使用从 react-virtualized-auto-sizer 。它也由Bvaughn制造，是解决问题的一个很好的解决方案。

通过允许您将固定列表的高度设置为其内容的高度，这可以解决问题，从而无法获得滚动条。如下所示：

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

这是codesandbox上的一个完整示例：

One solution is to use a package linked from the react-window github page called react-virtualized-auto-sizer. It is also made by bvaughn and is a good solution to the problem.

This solves the issue by allowing you to set the height of your FixedSizedList to the height of its content, so it does not get a scrollbar. Here's how that would look:

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

Here's a full example on codesandbox: