Synced Repeating Group Scrolling Possible?

[buero]

Hey Guys, we are building Content Managment App based on User Journeys (CX- Content Managment),

Has anyone a idea how we can make the repeating groups of each Step scrollable with sync?

So when the Step above scrolls horizontal (RG) the RG in the other groups scroll as well?
Normally i would pack everything in one rg underneath like a column.

But the problem is we have an area that is full witdh in the middle that should stay fix wile scrolling. Any ideas?

[yusaney1]

You can achieve this with different methods, one of them: using Javascript:
Bubble | No-code apps (bubbleapps.io)

[nico.dicagno]

One possible solution consists of grouping.

Pack everything in a single repeating group as you said.
Group this repeating group and all the full width elements you need into an align to parent group.
Align the full-width elements to the top nonant and use the top margin to push them down however much you like.
Then just make sure that these fixed width groups are layered on top of the RG. That should do the trick.

[samtsam34]

hey yusaney, can you add the link to the editor public so I can see the code?

[buero]

Hey yusaney - can you share the code pls or your editor? This would work perfectly!

[yusaney1]

Ops sorry forgot to add the link to the editor: Scrollit | Bubble Editor

@buero @samtsam34

[buero]

We got it working also for right sided scrolling.

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);
});

Thx for the help community.

[samtsam34]

thanks a lot.
Does the code change for horizontal repeating groups?

[cheskiefisch]

@buero

{addClass: "scrollSync"}

Interesting why it doesnt work for me, maybe because it doesnt work for horizontal scrolling?

[cheskiefisch]

hi, you got an answer for this?

[notjrag]

I’d like to know for horizontal scrolling as well please

[cwd]

@buero Thank you for this awesome solution. Like @notjrag @cheskiefisch, I also need code for horizontal scrolling. Is there code for this?