2

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>
dev
  • 43
  • 1
  • 6

1 Answers1

2

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: Edit compassionate-keldysh-nsrkw0

Andrew Hulterstrom
  • 1,563
  • 4
  • 18
  • This solution works! but the user will scroll without any reference of the list scroll itself only the main scroll will be the reference and it isn't accurate. it could be confusing for the user :( – napstercake Mar 02 '23 at 21:29