Scroll Synchronization

Scroll synchronization allows multiple user's scroll positions to be synced in real time.

Scroll sync demo

Each scroll sync session has one "leader" and multiple "followers". The leader is in charge of where in the document everyone is viewing.

A document can have multiple active scroll sync sessions at once, however a user can only be leading one session at a time, and a user can only be connected to one session at a time.

note

Scroll synchronization sessions are kept track of in server memory (they are not included in the database). If the server restarts, then the scroll sync session will be closed for all users.

Creating a scroll sync session#

Once you have opened a document, you can create a scroll sync session with the Document.createScrollSyncSession API.

When a scroll sync session is created, the EventManager.scrollSyncSessionsChanged event is fired for all users connected to the document, and ScrollSyncManager.availableSessions is populated with the new session.

Example

import { CollabClient } from '@pdftron/collab-client'

const client = new CollabClient({...options})

const user = await client.loginAnonymously('Joe');

const documents = await user.getAllDocuments();

// Load the first document
const document = documents[0];
await document.view();

const session = await document.createScrollSyncSession();

Getting available scroll sync sessions#

Active scroll sync sessions can be retrieved using the ScrollSyncManager.availableSessions property. This property is updated in real time.

The EventManager.scrollSyncSessionsChanged is fired any time this list changes. Any sessions in this list can be joined at any time.

import { CollabClient } from '@pdftron/collab-client'

const client = new CollabClient({...options});
const user = await client.loginAnonymously('Joe');
const documents = await user.getAllDocuments();

const document = documents[0];
await document.view();

// get all the available sessions
const sessions = client.ScrollSyncManager.availableSessions;

client.EventManager.subscribe('scrollSyncSessionsChanged', () => {
  // Get updated sessions
  const sessions = client.ScrollSyncManager.availableSessions;
})

Joining a scroll sync session#

A scroll sync session can be joined by calling the ScrollSyncSession.join() API.

Once you have a scroll sync session, join it by calling join().

// get all the available sessions
const sessions = client.ScrollSyncManager.availableSessions;

if(sessions[0]) {
  sessions[0].join()
}

What happens when you join a scroll sync session#

When you join a scroll sync session, the following things happen:

The user is no longer able to scroll up/down the document. The session leader now controls the scroll position
The viewer is forced into continuous layout mode
The joinedScrollSyncSession event is fired

Leaving a scroll sync session#

A scroll sync session can be exited at any time by calling ScrollSyncSession.exit().

If the leader of the session exits it, the session is closed for all users

What happens when you exit a scroll sync session#

When you join a scroll sync session, the following things happen:

Scrolling is re-enabled for all users
The leftScrollSyncSession event is fired

Other utilities#

Getting the active session#

The active scroll sync session can always be retrieved using the ScrollSyncManager.activeSession property.

Checking if a user can create a session#

The ScrollSyncManager.canCreateSession property returns true if the current user is able to create a new session.

Checking if a user can join a session#

The ScrollSyncManager.canJoinSession property returns true if the current user is able to join a session.