TanStack / virtual

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte
https://tanstack.com/virtual
MIT License
5.5k stars 301 forks source link

Additional scroll events after scrollend causes isScrolling to remain true #799

Open martinpengellyphillips opened 2 months ago

martinpengellyphillips commented 2 months ago

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.

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

abhi-slash-git commented 2 months ago

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