search

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

Mouse wheel scroll stops working #292

Closed UltimaBeaR closed 2 years ago

UltimaBeaR commented 2 years ago

Starting from today (may 27, 2022), mouse wheel stops working after couple of scrolls, and only starts again on mouse movements (and again stops after couple of scrolls if mouse is not moving). Happens on all setups - fixed, variable, dynamic sizes. If i use scroll thumb dragging - everything works fine. Appears on chrome version 102.0.5005.62 on windows 10 (21H2, 19044.1706) . Maby this is some chrome bug (i tried to restart chrome and machine - doesn't help), but react-virtual works as expected on windows edge browser at the same time (chromium engine). I haven't check it yesterday, but day before yesterday and earlier i haven't got any issues with react-virtual. From now on i see this kind of bug everywhere react-virtual is used - on my project, on online samples. Also this problem appears on https://virtuoso.dev/ library (but it doesn't appear if i choose scenarios - window scrolling option sample). This behaviour doesn't appear on react-window and react-virtualized.

From quick glance on sources i noticed it uses onScroll events - i suppose problem lies somewhere near it.

UltimaBeaR commented 2 years ago

I've experimented with sources and here is what i found: There is no problem with scroll event: it is added and removed correctly on useEffect. Problem is that scroll event doesn't fire. If i add 'wheel' event at the same time - it triggers (but not 'scroll' event). I think that scrolling stops working when mouse gets on newly created (by react) html items. It just doesn't recognize new items as scrollable content or something. But if mouse is moved - it begins to recognize these new dom elements and scroll event continues to fire (same event handler, without reapply).

First thing i tried - i added "pointer-events: none" to rows - it worked, scroll is working this way. Mabe because it stops relying on row elements to know where to scroll on. But this way i can't interact with element, i tried to remove this style when scroll stops - but that doesn't work.

I then googled for scroll problems and found this https://github.com/bvaughn/react-window/issues/221 It's react-window lib which is working for me - and one big difference is that they are using "will-change: transform" property on outer element, and this is by default.

So i tried it and it worked with react-virtual. This way elements renders with more lag, but that's fine for me.

Maybe there is some better solution to this problem, but for now i gonna stick with "will-change: transform" on outer element (which is "parentRef" element passed to options). I think that should be added to docs and samples.

tannerlinsley commented 2 years ago

There are definitely some upstream bugs happening with some of the browsers, but this is out of our control. We'll do our best to keep things safe in all browsers.