Multi-axis sync problem

Question

Multi-axis sync problem

mmamedel opened this issue 3 years ago · 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.

Hawwash · Answer 1 · Fri Aug 13 2021 19:46:27 GMT+0800 (China Standard Time)

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 🙏🏽

Sanath Kodikara · Answer 2 · Wed Nov 03 2021 06:00:16 GMT+0800 (China Standard Time)

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

Please let me know how we can avoid this.

wahyupriadi95 · Answer 3 · Mon Apr 04 2022 14:42:23 GMT+0800 (China Standard Time)

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.

mmamedel · Answer 4 · Mon Apr 04 2022 18:36:35 GMT+0800 (China Standard Time)

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