I am trying to integrate react-window's FixedSizeList and FixedSizeGrid ponents to increase the initial rendering speed of my page. Is there some way for me to let the user scroll down the react-window ponent using the viewport's scrolling area? I was also wondering if there is some way to remove the scrollbar from the react-window ponent 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 ponent so the vertical scrollbar beside the ponent appears, which I want to remove. I also cannot figure out how to let scrolling downwards on the viewport make the react-window ponent 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 ponent 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>

I am trying to integrate react-window's FixedSizeList and FixedSizeGrid ponents to increase the initial rendering speed of my page. Is there some way for me to let the user scroll down the react-window ponent using the viewport's scrolling area? I was also wondering if there is some way to remove the scrollbar from the react-window ponent 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 ponent so the vertical scrollbar beside the ponent appears, which I want to remove. I also cannot figure out how to let scrolling downwards on the viewport make the react-window ponent 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 ponent 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>

• javascript
• html
• css
• reactjs
• react-window

1 Answer 1

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: