Props ScrollElement of WindowScroller load every items if parent is InfiniteLoader

[albanlorillard]

Hi !

Bug Report

What is the current behavior?

I try to attach the scroll of a WindowScroller with the scrollElement props on a parent HTML section. I use "useRef" Hook for this. My WindowScroll has an InfiniteLoader component as a parent.

If I directly link the ref on scroll Element like this ;

<WindowScroller
            scrollElement={myElementRef.current}
          >

There is no element loaded.

If I add a checkbox to change the state between default case (scrollElement = window) and scrollElement myElementRef.current, every elements are loaded in the DOM. There is no virtualization.

Code Sandbox

What is the expected behavior?

I suppose to make work the InfiniteLoader component with scrolling on a part of my page. I would like to have the scroll attach (like on the demonstration here : https://bvaughn.github.io/react-virtualized/#/components/WindowScroller) with an infiniteLoader and the virtualization work.

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

Browser	Firefox & Chome latest version
OS	Mac OS - Sanoma 14.2
React	18.2
React DOM	18.2
react-virtualized	9.22.5

[guilanxiao]

met the same issue. Do you have solutions for this case ?

[albanlorillard]

I finally do the same that the example.

I create a container with a fixed height in the CSS and with the same properties in the example:

 display: 'flex',
      position: 'relative',
      overflow: 'auto',
      height: '200rem',

I got his ref (scrollContainer) and I put it in the windowScroller then I introduce a state "withScrollElement" to switch the scrollElement prop from window to my scrollContainer ref.

   <WindowScroller
                          scrollElement={withScrollElement && scrollContainer?.current ? scrollContainer.current : window}
            >

I switch withScrollElement to true when my component finish to render.

It's a little dirty but work fine.