How to scroll a new element, without scrolling the rest? (Like all mobile apps)

Great question! I believe this is easier for repeating groups, but when you don’t have a repeating group, it can be a bit tricky. There may be a better way, but one possible workaround is to use a combination of parameters, and the Toolbox plugin in order to run custom JavaScript. Here is an example:

Preview:

Editor:

Here there is a Settings Group, located on the page and a Notifications Group, located in its own Floating Group. When one of the blue groups on the Settings Group is clicked, the Notifications Floating Group becomes visible and the page is scrolled to the top. Since the scroll takes us to the top when the Notifications page becomes visible, we also want to temporarily store the previous scrolling position where we left off on the Settings page.

The first step is to setup the Go to Page workflow for when one of the Settings page blue squares are clicked. Here we can use the ‘Go to Page’ action, and send an additional parameter in order to send the scrolling position through the URL. This parameter (‘position’) stores the scrolling position:.


*After checking the box ‘send more parameters to the page’ you can type in the word ‘position’ for the key, but this could be any label you prefer!

When this parameter is sent, or added to the URL, we want the Notifications floating Group to become visible. To do this, we can set the floating group to not be visible on page load, and add the conditional statement to make it visible when the position parameter is not empty:
parameter

The reason I’m sending the parameter is so that when a blue group on the Settings page is clicked, the User’s scrolling position will be ‘saved’ in the page URL, and you’ll see it by it being added to the end of the page URL in the form of ?position=942 (with 942 being the scroll position we left off on on page 1, as an example). The other benefit of using parameters for this, is so that the User can click the back button on their phone, or in their browser, and they’ll and be taken from the Notifications Page to the Settings Page (not the page they were on before the Settings page).

new

Then we just need to setup two different workflows with JavaScript in order for the page to scroll to the top of the Notifications Page each time that becomes visible, and another workflow which goes to the scrolling position where the User left off on the Settings pages when back is clicked.

In the Notifications workflow, the condition is that when the position parameter is not empty → scroll to 0,0 (X,Y coordinates). That brings us to the top.

Then we can use a similar workflow which uses the position parameter’s scroll position value as dynamic data for the Y when the Page is reloaded (the User has hit the back button).

The “When” parts to these workflows are almost the same, but the main difference is the “Page is loaded” part. When any blue Group is clicked on the Settings page, the “Go to Page” action takes us to the same page, but doesn’t actually reload the page - it only sends the position parameter.

When we are on the Notifications Page, and click the Back button in the browser or on our phone, the page is reloaded. It’s a bit confusing since it looks like the position parameter disappears from the URL when we hit ‘back’ but it still can be used in the workflow:

Hopefully someone has a more clever way, but that may be a potential workaround for now! :slight_smile: If any of this was confusing or if I can help in any way feel free to let me know!

11 Likes