scroll-sync-react icon indicating copy to clipboard operation
scroll-sync-react copied to clipboard

Multi-axis sync problem

Open mmamedel opened this issue 4 years ago • 4 comments

@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.

mmamedel avatar Feb 12 '21 18:02 mmamedel

Hey @mmamedel, sorry for the very late response, I will take a look at this, but probably some styling issue, or html tags default behaviour...

Thanks for reporting it 🙏🏽

AhmadMHawwash avatar Aug 13 '21 11:08 AhmadMHawwash

I have noticed the same behaviour. This is my example. MY SANDBOX

Please let me know how we can avoid this.

sanathko avatar Nov 02 '21 22:11 sanathko

Hi, @sanathko, have you find the solution? because I have. I had forked your sandbox and found the left section should add 'scroll' props with value 'synced-only'. I hope that helps you.

wahyupriadi95 avatar Apr 04 '22 06:04 wahyupriadi95

@wahyupriadi95 when you do that will the left section follow the right section when you scroll in right section? In my use case I want it to be bidirectional but only sync Y scroll, not X scroll. Maybe we could have x-scroll and y-scroll props instead of only a scroll. Or add more options to the current scroll.

mmamedel avatar Apr 04 '22 10:04 mmamedel