Scrolling to a specified position in repeating group

[sondreberg91]

Hey guys,

I’m using nested repeating groups to show categories and sub categories with things.

I have built different pages to have different “views” of these. One page, let’s call it “the overview page” shows all the categories in an RG with a nested RG of sub categories with another nested RG containing the things in this sub category. Here the user can scroll horizontally through all categories and get a simplified overview of the sub categories in contains as well as then things in these sub categories (shown vertically).

Illustration:
| category |…
| sub cat |…
| thing |
:
:

Another page, lets call it “sub category page” will only show the sub category as a title (text) and then have a single RG with the things in that sub category listed vertically. This page will showcase much more details of each thing in the sub category.

What I want to achieve is that when the user clicks a “zoom button” from the “overview page” he is directed to the “sub category page” of the sub category in the centre of his view port when he clicks the button (button is a float).

The sub category page is of type “sub category” and through workflow I can send the sub category information of my wish, but I have no idea how I could “register” which # of the RP is in the centre of the users viewport when he click the button from the “overview page”.

Anyone have an idea of how to go about this?

[sam.morgan]

Hello! Sam here, with Bubble support.

There is a workflow action called “scroll to entry” that takes two parameters:

• A repeating group element
• A data record that matches the type of content of the repeating group

It sounds like you could achieve your desired functionality by setting up a “page is loaded” workflow on the “sub category page” that uses “scroll to entry” to scroll to the correct sub category in the scrollable list.

Let me know if that helps, or if I misunderstood anything!

[sondreberg91]

Hey sam, thanks for answering

I believe what you suggest is sort of the reverse of what I am trying to achieve

Imagine a repeating group with categories stretching horizontally. Then a nested repeating group with things of this category stretching vertically. The user is able to scroll both vertically and horizontally. I basically need to “detect” which sub category is in the center of the veiwport (which is likely where the user will be looking and if not he will at least be looking on adjacent sub categories).

This way, when the user clicks on a floating “zoom in” button, the sub category he is likely looking at will be sent to the page he will be redirected to. He is taken to a dynamic page which is of type sub category.

I’m not sure if I was able to explain it any better let me know if you get the question not