CODEWITHSUNDEEP
angular
Lempkin
Lempkin

Reputation: 1578

Synchronize scrolls on 2 divs

I have 2 scrollable divs with same height, and I would like to sync their scrolls in 2 ways.

I've made a stackblitz here : https://stackblitz.com/edit/angular-9-0-0-rc-1-sync-scroll?file=src/app/app.component.ts

What I can see is that the scroll event bounces several times and it ends up with a very slow scroll, this is not fluid.

I don't know how to prevent that bouncing, and that when user scrolls in a div, the scroll is reported in the other div and then the event ends there.

I tried with the cdkScrollable but there's a small time between the moment that user scrolls in a div and moment that the scroll is reported to the other div, and I need it to be seamless.

Any idea?

Upvotes: 0

Views: 1584

Answers (1)

igor_c
igor_c

Reputation: 1250

So the problem was that when scrolling the first list it updated the second one which also reacted to scroll event and updated the first one. I'm not sure that's what you described in the question, but anyway my idea of fixing it is to check where's cursor right now and update the opposite list. It can be easily done with extra property in the class and updating it on mouseenter event.

This is my solution: https://stackblitz.com/edit/angular-9-0-0-rc-1-sync-scroll-m9jqr7?file=src/app/app.component.ts

Upvotes: 5

Related Questions