Single-Page Native App: How to Enable Scrolling on Certain Elements?

What is currently the best way to create a scroll interface on certain groups on a single page app? I have searched the forums and none of the solutions work (specifically, collapsing group height and creating empty buffer groups do not create scrolling, and long groups of elements get cut off). I only want certain “pages” to be scrollable, and not the entire index.

My pages are made up of element groups which are hidden and shown on a single index page. Expanding the index creates a scroll but it creates it everywhere, even where it’s not necessary.

Please let me know if it’s possible and how it can be achieved, perhaps there’s a plugin for it?

bump. still looking for a solution

I think you just need to set your page length to be longer then your phone length and it should auto-scroll. If that doesn’t make sense, tell me how you got it to stop scrolling in the first place, maybe i’m missing that.

I tried setting the page length to be longer than phone length, and it works to create a scroll effect. The problem is, the scroll applies to all pages, even the ones that don’t need to scroll. I just need it to scroll when showing certain groups of elements.

Bump still looking for a solution

Bump still need help on this

Bump still searching

bump still looking

1 Like

Constantly bumping this will get people annoyed, so I suggest you stop. You will probably need some JS that will target the specific group instead of the whole page.

1 Like

Put a long RG inside a short group? Also try floating and other types of groups maybe? Let’s say your index page is 540 px tall. Create three groups 170 px tall and put 15px between each group (170 + 15 + 170 + 15 + 170 = 540). So there should be no scrolling at this point. Now inside each group, put respective scrollable objects/RGs. The index should still remain non-scrolling while the RGs inside the groups can be independently scrolled.

Or maybe I didn’t understand what you are trying to achieve.

Did anyone ever figure this out, here’s the problem again:
Normally in a typical app you’d have different pages each with different heights. Thats fine and all. But the problem here is by building an app, its better to have everything in one page, and each page instead becomes a group. Now, the problem here, is if one page/group needs to be eg. 1000px tall, and another page/group can only be 500px tall, if you set the page height to 1000px, even if you hide the 1000px group and show only the 500px group, because of the page height is 1000px on the 500px group you can scroll down so far down.

Basically, is there a way to either A) adjust page height dynamically, or B) somehow not define a page height and let the groups push the page height down? I have no idea how to fix this issue.

You should stack the groups vertically:
Group 1
Group 2
Group 3

Then right click each group and set collapse when hidden.

The page height doesn’t collapse still AFAIK. I ended up using JS to solve it though, thanks for the help though :D.

Cool. Leaving this note for other readers: generally vertically stacked groups collapse properly. If the height doesn’t collapse, it means there is some other element or group that is on top of or overlapping that group. You can use “Inspect” in debug mode to diagnose.

2 Likes