This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ray Alexander
Posted Apr 22 - Read on Facebook

hey all. I've asked a question similar to this before but I'm trying to see if there's a better solution out there.

I'm trying to replicate a mobile webpage that is longer than the viewport (not a super rare case...)

I make a scroll component that is screen width and height. inside that I put all my content.

https://framer.cloud/hKQnt/ for quick reference.

On framer cloud and framer mirror the content goes from top of screen to bottom of screen. which is fine. But I'm going to be building a webpage, and when you open it in safari on a phone, as you scroll down the 'page' the safari top and bottom bars remain static, they don't fold away like they do in real life.

So the solution I've already discovered is to replicate the safari bars as shown here:

https://blog.framer.com/from-a-to-b-and-back-again-196ffd26ec48

and then open the prototype on framer mirror or cloud. However, I want to upload my prototypes to a server so that the usability folks can open them on any phone directly from url.

So the TL;DR: is there a way to construct my main page scorllcomponent so that when it's opened on mobile safari the status bars react to scrolling correctly?

3 Comments

Vladimir Strashkov

how about on scroll event, if the scroll is lower than all the way to the top, increase the height of the scroll component? not sure, but might work.

Vladimir Strashkov

of coars change the height of scroll for exact the height of the changing safari bars

Ian McClure

The scroll component isn't actually scrolling the underlying page the needs to scroll to tigger safari to hide the UI.
I don't know if there is a thing you can call to tell safari to hide the chrome.

Read the entire post on Facebook