virtual

virtual copied to clipboard

Describe the bug

Dynamic height ，There are two problems

1. For example, when I locate row 5000 and scroll up again, the problem of flickering。
2. when I locate row 5000，positioning is not accurate，May be located at 510

Your minimal, reproducible example

https://codesandbox.io/s/github/tanstack/virtual/tree/beta/examples/react/dynamic?from-embed=&file=/src/main.tsx

Steps to reproduce

The official website can also reproduce the problem

1. For example, when I locate row 5000 and scroll up again, the problem of flickering。
2. when I locate row 5000，positioning is not accurate，May be located at 510

Expected behavior

Help answer the above two questions

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

tanstack-virtual version

3.0.0-beta.18

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.

I've noticed a similar issue with inaccurate smooth scroll on the official examples. It takes 2-3 clicks on the "scroll to 5000" button to actually reach index 5000 accurately. This codesandbox works however by using a custom scroll function.

I'm also experiencing issue no. 1.

It seems to happen specifically when scrolling down a dynamic height list via JS, then scrolling back up via mouse/trackpad (eg. a chat app). If the estimateSize function is not completely accurate, scrolling back up will lead to flickering until all items are measured.

This discussion seems related: https://github.com/TanStack/virtual/discussions/195

@piecyk Do you have an idea about this issue? The official example shows the issue too. thanks

@wuarmin here we have couple of issues, overall we calc the position of each row base of previous one, when we don't know the real size we estimate it, via estimateSize and that's why it's required.

When scrolling down everything is fine, because we read size while scrolling of each row and update position, then when scrolling up we know everything so there is no flickering.

Jumping in the middle of the list is something complete different, one solution to more accurate scrollToIndex is called it twice, second time in next frame, like requestAnimationFrame,

const scrollToIndex = (index: number) => {
  const options = { smoothScroll: false, align: 'start' } as const
  rowVirtualizer.scrollToIndex(index, options)
  requestAnimationFrame(() => {
    rowVirtualizer.scrollToIndex(index, options)
  })
}

For flickering the problem is how we measureElement, arrow function on ref is bad as it will be called twice each render, so for each render we are reading size x2 and etc, that is really problematic when on top we are scrolling and trying to position the elements.

ref={(el) => {
  virtualRow.measureElement(el);
  virtualColumn.measureElement(el);
}

To help triage a lot of outdated issues, we're closing this due to its age. If this issue is still relevant, please tag @ tannerlinsley in a new comment confirming the case.