How to sync scroll position?

Need your input.

So I’m building a project where the text is being sent from the server to the clients via WebSocket, and doing a text scrolling animation like a teleprompter.

Everything is working fine. But the one problem is scroll position inconsistent in the client joining late. Because the scroll logic is being handled by the client itself.

let’s say if client 1 and client 2 are connected at the same time, and the play button is pressed. It sends out websocket event/message PLAY/PAUSE and it just works fine.

Now when client 3 joins the room in the middle of the PLAYING event, the scroll position is inconsistent because of the client’s side-scrolling logic.

I’m not sure this is the right approach. How can I sync the scroll position?

  • Frontend: React
  • Websocket: Phoenix

I mean, can I send the scroll position back to the server from the first connected client, and rest of the clients can use that data. Is it possible?