Scrolling does not work correctly.

[alkosorukov]

Describe the bug

Scrolling does not work correctly. I thought the problem was with the position: sticky table header, but no.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/mystifying-dew-t5nd7v?workspaceId=ws_G2EwNr8rBvsbnPfjfHKzRb

Steps to reproduce

Let's take a basic example from https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-rows and add a button (for example, scroll to the last element).

Expected behavior

We expect: when you click on the button, you will see 50,000 items. Reality: we not see element 50000.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

windows, edge

tanstack-virtual version

3.13.14

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[piecyk]

Can't fork the CodeSandbox due to:

Out of credits.

The main issue is that in a scrolling container with a sticky header, the virtualizer needs to account for it. This can be handled using scrollMargin.

The trick is that since the margin is applied to items, we need to subtract it from the top during rendering using:

transform: translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px);

Additionally, because the header is sticky, we need to inform the virtualizer by setting scrollPaddingStart.

1. Add the following to useVirtualizer

scrollMargin: 48, // Header height  
scrollPaddingStart: 48,

2. Subtract scrollMargin in the transform calculation.

With these adjustments, everything should align properly.

[alkosorukov]

Thank you. I did as you wrote (updated the example) and it works. But only if there is no horizontal scrolling. I tried increasing the scrollMargin and scrollPaddingStart, but it didn't solve the problem. How would you also take into account the amount of scrolling?

[piecyk]

But only if there is no horizontal scrolling

hmm don't sound right, horizontal scrolling should not affect it, hard to say without example.

[alkosorukov]

An example with the added parameters is here https://codesandbox.io/p/devbox/mystifying-dew-t5nd7v you need to click on "scroll to bottom"

[piecyk]

Works fine for me, don't really follow what's the issue, maybe you want to useWindowVirtualizer?

[piecyk]

Closing this now. If any new issues arise, feel free to reopen or create a new issue.

[alkosorukov]

Hi. Why close it if no solution has been found? useWindowVirtualizer, as I understand it, works for the entire browser window. And we have a table in the block.

orks fine for me, don't really follow what's the issue

This is incorrect behavior - we don't see the bottom line completely.

[piecyk]

@alkosorukov apologies for closing the issue earlier. At the time, I wasn't able to reproduce it. However, now i see that the bug is visible when scrollbars are present.

[Himan8077]

@piecyk any update on this issue as i'm also facing the same in safari