ahmadmhawwash / scroll-sync-react Goto Github PK

@AhmadMHawwash Thank you so much for this amazing package. Just wanted to point one issue I had using it.

When I have two DIVs, like a menu and the content, and want to sync the scroll vertically between the two but I still want to scroll horizontally the content, everything works. But, when I have then content horizontally scrolled and scroll either the menu or the content DIV vertically, the content horizontal scroll goes back to the start.
Explaining may sound confusing, so I made this gif:

And here is the sandbox with the code.

It looks like you are using fixed dependencies for react and react-dom which makes it impossible to use with newer versions of react 16.x. Please use a version range.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"16.13.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.12.0" from [email protected]
npm ERR! node_modules/scroll-sync-react
npm ERR! scroll-sync-react@"1.1.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Hello, guys !
First of all, congrats for this component!
Do you have plans to create TS types on @types/react-scroll-sync?

I am trying to use this library with react-window to align a "sticky" header/row however because of the way react-window is working under the hood with the FixedSizeList, you have to wrap it in a div and this is the incorrect ref.

You can see a sandbox link here.

Here is a commented sec

<ScrollSyncNode group="a">
        <div> {/* ref in ScrollSync is made to this element*/}
          <List // But this creates a `div` that is the actual element we want to have a ref of
            className="List"
            height={75}
            itemCount={50}
            itemSize={100}
            layout="horizontal"
            width={300}
          >
            {Column}
          </List>
        </div>
      </ScrollSyncNode>

I tried removing the wrapping div, but I get a e.persist() is not a function, I assume this is because the ref is not passed down properly internally by react-window.

Is it possible to allow us to pass an as or component option prop for ScrollSyncNode that would take a forwardRef instance so we can pass the proper ref to ScrollSync?

I have tried using the outerElementType and innerElementType props for react-window components and rendering a ScrollSyncNode but same problem, since ScrollSyncNode clones it's children (ref won't be passed?) this creates weird side effects.

Any ideas? Also, nice library, much better than the unmaintained version and first class typescript support is always a welcome sight!

Hello @AhmadMHawwash and thank you for this great library!

The scroll syncing has been working great, but I noticed a small problem with how the library handles the ref prop.

I want to set the position of my scrollable div, so I'm using the ref prop to get a reference to the element:

<ScrollSyncNode>
    <div className={styles.scroller} ref={myRef}>
    ...
   </div>
</ScrollSyncNode>

This does not however work, because the library creates its own ref that it assigns to the direct child, overwriting the one that I have given (myRef).

One way to fix that would be to use the already existing ref from the children property if it exists, and create new one only if it does not exist. e.g.

-const ref = useRef<EventTarget & HTMLElement>(null);
+const ref = chilren.ref || useRef<EventTarget & HTMLElement>(null);

I can create a Pull Request for that change if it makes sense.

Thanks!