TIP: :Sync of Scrolling for Repeating Groups

[buero]

You ever wanted to RG to Scroll together like this?

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

[thedraftprofile]

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

[buero]

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

[cheskiefisch]

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

[cheskiefisch]

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?

[cheskiefisch]

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

Possible?

[sbass]

THANK YOU! This has solved a brutal problem for me and works great.

It wasn’t explicitly stated that the above would only work for horizontal scrolling, but even someone like me (no programming skills) could google a little and figure out to use ScrollTop instead of ScrollLeft to get it to work.

Beautiful!

[buero]

great to hear!
Post your code here - maybe someone else needs it as well

[buero]

normally it should work - maybe you have to trigger the JS again when shown the new RG