[BUG] Vertical scroll doesn't work properly if horizontal scroll is present and moved

[maciejregula]

Hello,

In the TableVirtuoso component, vertical scroll doesn't work properly if horizontal scroll exists and is moved to the right. The bug is present even on the demo page.

To Reproduce Steps to reproduce the behavior:

1. Go to the https://virtuoso.dev/table-fixed-columns/
2. Move the horizontal scrollbar to the right.
3. Move vertical scrollbar to the bottom - you will notice that scroll doesn't work properly

Expected behavior Vertical scrollbar should properly scroll according to the current mouse position.

[petyosi]

What browser/OS? Can you record a video?

[maciejregula]

https://user-images.githubusercontent.com/72083355/158436494-5e194514-dc85-42b1-86e7-c0c6263de2ba.mp4

My OS: Chrome 99, windows 10 pro

[maciejregula]

The issue doesn't occur in Firefox. However, I can confirm that it occurs in Chrome and Edge. I also noticed when you scroll very slowly, it works ok.

[fatton139]

Ran into this issue as well on Chrome.

I had a look at the call stack for when the scroll event gets is triggered on the virtuoso-scroller and it traces back to the event handler in useScrollTop.ts.

Not sure why the event is continuously fired.

Happy to try to make a PR, but currently I don't understand the codebase enough to know where to proceed.

[shinenic]

Got this issue as well on my Chrome as well, but it works on my Safari.

https://user-images.githubusercontent.com/20126676/167167659-e7b996c1-5401-4ba1-b6e8-3b171bd2a1f4.mov

---

Browser: Chrome Version 100.0.4896.127 (Official Build) (arm64) Mac OS: 12.3.1

[Tirzono]

I noticed this becomes an issue when the first column is not in view anymore. So with the sticky column example it only becomes a problem if you scroll horizontally that far that even if the column would not be sticky, it would be out of view.

Maybe it is something that looks at the first column and because it's out of view it becomes an issue?

@petyosi do you know any part of the code that looks at the first column size or something like that? I tried to look to find something myself but I have a hard time finding where I need to be. If you have some ideas where to look at then I am happy to make a PR.

[Tirzono]

After debugging for a while I noticed that it isn't necessarily an issue with the first column being the issue but it has more to do with the fact that the height and widths of the rows/columns are changing while scrolling and the reason why we saw this issue when we scrolled that far that the first column was not visible is because of the fact that the first column in the examples had a fixed width and the others had a dynamic width.

In an example where all the columns have a fixed width scrolling works normally:

https://codesandbox.io/s/sandpack-project-forked-4lf9o5?file=/App.js

So a workaround for now would be to set a fixed width for each column.

[tklg]

The issue is still present in the example with all fixed width columns:

https://user-images.githubusercontent.com/1696813/168819363-20eb020b-a8a7-478a-836c-9aca4ab1f94d.mp4

[petyosi]

Here's a workaround for the problem, which I am not exactly happy with. https://codesandbox.io/s/sandpack-project-forked-pg6te6?file=/App.js

The problem seems to be related that the filler row td needs to span the entire table. I could not find a way to span it automatically, and counting cells seems like a brittle solution.

To ensure that we don't conflate two separate problems: since the table is virtualized, it's highly recommended to:

• set the layout to fixed
• set explicitly the width of each column

Otherwise, the width of the columns will fluctuate when scrolling around, based on the content in it. There's no magic that can guess what the width of the column be since the content is not available.

If anyone has a better idea on how to make a filler row - please share.

[mrfrigerio]

I don't thing that this solves the problem. I'm using fixed layout and fixed width columns but i'm facing the same behavior. Automatic scrolling down indefinitely.

[petyosi]

@mrfrigerio Reproduce the problem using the workaround from my previous comment in a sandbox and paste a link here.

[mrfrigerio]

https://codesandbox.io/s/sandpack-project-forked-pg6te6?file=/App.js

Sorry @petyosi , my bad. I didn't see the custom FillerRow. Implementing that way works like a charm.

Thank you

[ivanjoz]

I was experiencing the same problem. Solved by this css rule

style={{ overflowAnchor: "none" }} in the overflowing div. It has to do with the browser's scroll anchoring behavior

I found the solution here https://github.com/TanStack/virtual/issues/426 And also here https://stackoverflow.com/questions/42958463/stop-automatic-scrolling-on-page-content-change

[petyosi]

@ivanjoz Thanks for sharing that, I incorporated the fix.

[github-actions[bot]]

:tada: This issue has been resolved in version 4.3.10 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: