Repository navigation
Scrolling does not work correctly. #960
Description
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
- I agree to follow this project's Code of Conduct
- 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.
Activity
piecyk commentedon Mar 20, 2025
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:
Additionally, because the header is sticky, we need to inform the virtualizer by setting scrollPaddingStart.
With these adjustments, everything should align properly.
alkosorukov commentedon Mar 21, 2025
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 commentedon Mar 21, 2025
hmm don't sound right, horizontal scrolling should not affect it, hard to say without example.
alkosorukov commentedon Mar 21, 2025
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 commentedon Mar 21, 2025
Works fine for me, don't really follow what's the issue, maybe you want to useWindowVirtualizer?
piecyk commentedon Mar 24, 2025
Closing this now. If any new issues arise, feel free to reopen or create a new issue.
alkosorukov commentedon Mar 24, 2025
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 commentedon Mar 25, 2025
@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 commentedon Apr 4, 2025
@piecyk any update on this issue as i'm also facing the same in safari