[Feature]: Support a div have flexible height above a virtualized list

[rubysky17]

Hi Dhilt, I very appreciated what you sponsored your knowledge about the virtualized list. But, when i use your idea about window scrolling I don't always have a simple list on top of my screen. I have a lot of elements above a virtualized list.

• Example: I have a div with 576px above my virtualized list. And when I'm scrolling the window the first item don't render in top of window screen.
• The second thing i want to say, the list only renders right when it is only in the top screen.
• If I have a div above, I will receive the wrong UI :<
• This is my code: https://codesandbox.io/p/sandbox/dhilt-react-virtual-scrolling-entire-window-forked-nrj29f?file=%2Fsrc%2FVirtualScroller.js

[dhilt]

@rubysky17 Looks like your fork is private. It says

Sandbox not found It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.

If I could open it, I would have a look...

[rubysky17]

@rubysky17 Looks like your fork is private. It says

Sandbox not found It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it.

If I could open it, I would have a look...

I'm so sorry about that, it seems like I set private in my sandbox I'm forked. I have changed it to public, you can open it again.

• Link: https://codesandbox.io/p/sandbox/dhilt-react-virtual-scrolling-entire-window-forked-nrj29f?file=%2Fsrc%2Findex.js%3A50%2C20

[dhilt]

@rubysky17 Okay, here's what I would do for the static header issue: https://codesandbox.io/p/sandbox/dhilt-react-virtual-scrolling-entire-window-fixed-head-gqtrfm

In case you need more complex HTML around (above) the list, I would suggest to use common viewport approach, instead of the entire-window-scrollable one.

[rubysky17]

@dhilt Thanks for everything but it still not right with my case

• In the future, I hope you can scroll the entire screen with every DOM above or under the Virtualized List which is an incredible feature.
• Using a viewport with a fixed height like a container have many items inside, I can that way but it is still not right with my user behavior.
• I send you a feature example: https://virtuoso.dev/hello-table/#table-with-usewindowscroll
• The last one, thank you for your support and the great feature you created.

[dhilt]

@rubysky17 I think I got the issue. Here's the updated demo: https://codesandbox.io/p/sandbox/dhilt-react-virtual-scrolling-entire-window-with-header-and-footer-45x89p

I added header and footer of >100px height. The main change is that I had to provide the offset when calculating the index:

  const index = minIndex + Math.floor((scrollTop - offset - toleranceHeight) / itemHeight);

instead of

  const index = minIndex + Math.floor((scrollTop - toleranceHeight) / itemHeight);

Where offset corresponds to the vertical offset of the Ыcroller (specifically the top padding element) relative to the top edge of the window.

[rubysky17]

@dhilt thank you so much, I found your solution and applied that after your response. it seems to work like my behavior. Thank you and I will close about my issue.