Forum Documentation Showcase Pricing Learn more

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


#1

I have been trying for hours to make something that mimics the standard iOS list element.

Show list -> click list item -> show new group, scroll in new group -> go back to original list with scroll position same as it was.

Anyone been able to do this?


#2

@fayewatson, @NigelG - You both seem to have a good grasp on the platform, is it possible to recreate this standard functionality?


#3

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:

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).

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!


Go back at same location of the previous page
#4

This helped do the trick! Since I am optimizing for mobile, I am not using pages, but was able to do this with javascript.

I saved the page scroll as a state then pulled that state back in when I close the second group.

Thanks so much!


#5

Hi @fayewatson,
I am trying to build a similar functionality in my app but the difference being that I have built all the stuff on one page (Being a native app). When trying to duplicate this workflow it gives an error that Go to page action should not be used in native apps. Is there a workaround?


#6

Hi @Ankur :slight_smile: Ah, I haven’t created an app for the app store with Bubble, so I’m not sure about that error or if there’s a different way to make sure the User can go click ‘back’ on their phone without leaving the page. Alternatively, you can do what Ben did in the post above yours which goes to the scroll position once a User closes (or hides) a specific group. That probably is the best bet!


#7

Thanks @fayewatson :slightly_smiling_face:
Hi @ben7, can you please elaborate a little more how you accomplished this?


#8

Hi Ankur,

You can set a page state called “scroll position” (or whatever) with the current page scrolling position as its value. Then when you want to go back to the page and scroll to the previous position, you pull the target scrolling position from the “scroll position” page state.