How to distinguish mouse scrolling and scrollTo api scrolling ?

[NexxLuo]

I have two vitual list ,they need to scroll synchronously . I use then scrollTo change the list scroll position , but they will scroll in a loop ? In the another library react-window , onScroll event has an parameter called scrollUpdateWasRequested.
How can i do with react-virtuoso ?

[petyosi]

This is not supported currently, it does sound like a nice to have enhancement. As an alternative, You can maintain scrollUpdateFlagWasRequested as an external flag in your own state. Feel free to post an example, it can be useful for others as well.

[bytemain]

I also meet the some problem.

I want to contribute this feature to react-virtuoso, but I meet many problem here.

firstly, I'm try to modify the scrollToIndex method, add an interceptor to it:

and I use this extra value as an identify, it works very well.

But this cannot used in scrollTo and scrollBy, because they are actually DOM scroll.

And my another approach is :

still override the scrollToIndex emitter, but use a global boolean signal.

Ant this time I found this is still diffucult for me..

1. combineLatest should accept the 11th args.

2. the scrollToIndex will be invoke more than once. So it is hard to find the right time to controll this signal....

This makes me very frustrated, I want write my attempts here in case I may use it in the future.

https://github.com/bytemain/react-virtuoso

[farhdibehnamdev]

I added an id to the Virtuoso component. In useEffect, a wheel event is added to the Virtuoso component each time a user scrolls the mouse so that it can be detected.

  useEffect(() => {
    const vrtElement = document.getElementById("vrt");
    vrtElement?.addEventListener("wheel", doSemething);

    return () => {
      vrtElement?.removeEventListener("wheel", doSemething);
    };
  }, []);

<Virtuoso
      ref={virtuRef}
      style={{
        height: "100vh",
      }}
      id="vrt"
      data={getDataEntries()}
      itemContent={(index, data) => {return ()}
       />