TanStack/virtual

Additional scroll events after scrollend causes isScrolling to remain true

martinpengellyphillips opened this issue · 1 comments

Describe the bug

Additional scroll events sometimes occur after scrollend has been fired. This then causes isScrolling to be set to true indefinitely (until new scrolling is performed).

It is unclear if this is specific to Solid adapter, but I did confirm the events are received in the wrong order in the default observeElementOffset handler.

One could argue this is a browser implementation issue, but it might still be worth investigating more and potentially defending against by always setting isScrolling to false a short time after last scroll event received 🤔

Your minimal, reproducible example

https://codesandbox.io/p/devbox/solidjs-virtual-isscrolling-bug-r75q6y?file=%2Fsrc%2Fmain.tsx%3A7%2C26

Steps to reproduce

  1. Add a conditional rendering of placeholder rows in a virtual list (based on isScrolling).
  2. Scroll up and down and then stop scrolling*
  3. Sometimes the placeholder rows will not be replaced on scroll end because isScrolling is still true.
  • On Firefox, using the keyboard to scroll can often trigger the issue. On Chrome, scrolling rapidly to the top or bottom of the list can (though Firefox is easier to trigger the issue).

Expected behavior

isScrolling should revert to false when scrolling has finished.

How often does this bug happen?

Often

Screenshots or Videos

Kapture.2024-08-17.at.21.37.00.webm

Platform

macOS 14.5
both Firefox (129.0.1) and Chrome (127.0.6533.119)

tanstack-virtual version

3.8.6

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.

Happening on React as well. It seems to be something with intersection of an item with the parent container.