TIP: :Sync of Scrolling for Repeating Groups

You ever wanted to RG to Scroll together like this?

chrome-capture

Here is how we did it:

We installed the CSS Plugin and Java Script Plugin (Toolbox)

Activate Attributes in your Settings

Add this Text to all of your RG you want the Synced Scrolling behavior:

{addClass: "scrollSync"}

And enter this on page load

$(".scrollSync").on("scroll", function() {
	var scrollPos = $(this).scrollLeft();
	var page = $(this).parents(".Page").first();
	$(page).find(".scrollSync").scrollLeft(scrollPos);
});

Hope it works :slight_smile:

5 Likes

Tried this but it doesn’t seem to be working. Do the RGs have to be set to a specific layout style?

Normally not - can you give me access to your editor i will have a look.
This is my settings on the RG


Bildschirmfoto 2022-03-19 um 18.29.01

Did you find out the issue? struggling with the same problem

How can i make independent unified-scrolled RG’s:

if i want RG 1 and 2 to sync to each other, but RG 3 and 4 to sync to each other, INDEPENDENT FROM 1 and 2

Possible?

I’m trying to do synced-scrolling for NESTED RG’s: RG’s nested within a parent RG.

Possible?