Scroll View Position Restoration with a Sticky/Absolute Container

Hello everyone. I have a little over a year’s experience using AppGyver, but have been stuck on a frustrating issue. Not sure if it is a bug or I am doing something wrong.

The first screenshot has the setup of the AppGyver page. The other screenshot is an example from the actual app preview.

I am looking to make the header of the page stay locked to the top of the screen, while allowing the scroll view below. This works on the native version of the preview as expected when I set the position of the header to absolute, outside of the scroll view. Then, I offset the scroll view by the number of pixels for the height of the header. This works as expected on the native preview (on iPhone) but on the mobile web version (shown in the 2nd screenshot), the header does not stay locked to the top of screen.

I did find a workaround to this. To solve this, I can set the position of the scroll view to absolute as well. The issue with this is that when I select an item from the list (they are restaurants), it brings me to another page with details, but upon returning, the scroll position resets to the top of the page. On native, the scroll position works fine.

The page has enabled “Stretch to viewport height”.

Any ideas with this? I figure this may be an bug because the iOS native version works just as expected, but on a mobile phone in the browser, the page doesn’t return to the proper scroll position when returned to.

I know this is a nit-picky item but any help would be appreciated. I’ve tried many combinations of the settings, but can’t seem to figure it out.

What you are seeing is what I´d have expected. how can the page you are expecting to stay in a particular scroll location tell if its its being launched initially or returned to?

I would implement this slightly differently, pop the “detail” out into a separate container on the same page with a higher z index, so you never actually leave the page.

1 Like

Phil Thanks for the response. That was our old solution, but since the details page can be accessed from many different pages on the app, we want to have it as a separate page that just takes in an ID for that item, and loads the data. We also want to use separate pages for analytics tracking.

Hi! There is no way to implement this in web at the moment that I would know of, I’m afraid. I’m looking to implement a ”scroll scrollview to” type of flow function later on if I can, but that won’t be here for a while yet.