How to sync 2 different scrolls in react app?

[Kami1-ui]

How to sync 2 different scrolls in react app? Needed to create a table. Haven't found an example of a react application with virtualization yet

[vhermecz]

After adding two refs to your two scrollers, you could go with something like:

useEffect(() => {
  const firstScrollbar = firstRef.current?.osInstance();
  const secondScrollbar = secondRef.current?.osInstance();

  if (firstScrollbar && secondScrollbar) {
    const syncScroll = (source: OverlayScrollbars, target: OverlayScrollbars) => {
      const sourceScroll = source.elements().viewport;
      const targetScroll = target.elements().viewport;
      const syncHandler = () => {
        const { scrollLeft } = sourceScroll;
        targetScroll.scrollLeft = scrollLeft;
      };
      sourceScroll.addEventListener('scroll', syncHandler);
      return () => {
        sourceScroll.removeEventListener('scroll', syncHandler);
      };
    };
    const unSyncFirst = syncScroll(firstScrollbar, secondScrollbar);
    const unSyncSecond = syncScroll(secondScrollbar, firstScrollbar);
    return () => {
      unSyncFirst();
      unSyncSecond();
    };
  }
}, []);

Do NOT used defer on the scroll components, otherwise firstScrollbar or secondScrollbar is going to be falsy, and they wont be synced. The above code is a bit defensive in that regard, it just silently skips setting up syncing, if that happens.