TanStack/virtual

flushSync warning when using useVritualizer with initialOffset greater than available scroll

itziksn opened this issue · 2 comments

Describe the bug

flushSync warning when calling useVirtualizer with initialOffset greater than available scroll.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/virtualizer-repro-lk332q?file=%2Fsrc%2FApp.tsx

Steps to reproduce

  1. use useVirtualizer with initialOffset greater than the available scroll area in the scrollElement

Expected behavior

No errors/warning should happen.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: Windows
Browser: Firefox 121.0.1 (64-bit), Chrome 121.0.6167.85

tanstack-virtual version

latest

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.

I was able to hack around this error by providing my own scrollToFn and fixing scrollOffset before calling the actual implementation:

scrollToFn(offset, options, instance) {
  if (instance.scrollElement) {
    instance.scrollOffset = Math.min(instance.scrollElement.scrollHeight - instance.scrollElement.clientHeight, instance.scrollOffset);
  }
  elementScroll(offset, options, instance);
},

Not sure whether you think it should be the core behavior, but for me it fixed the issue.

NOTE: This fix works as is for vertical scroll, for horizontal scroll you'll need to use clientWidth and scrollWidth instead.