Hide scrollbars but allow scrolling in iPhone prototype

rp-7
newbie-question
#1

Hi all!
I am doing my first prototype in Axure, but I find myself struggling in allowing the client to scroll the prototype without displaying the scrollbars. IMHO they are not needed in my case, as I leave some cut elements at the bottom that give the affordance to scroll for more content.

I am using an iPhone canvas with an Inline Frame inside, in order to load the pages inside it. However, to make it scroll longer pages Axure requires you to set the scrollbars as always visible, and they are just not right to show on mobile.

Is there a workaround for this issue? Thanks!

#2

Yes there is a workaround. Its simple. Scrollbars on iPhones are not shown by default and appear as they are needed. If you present your prototype on a mobile device everything will be all right.

If you want to show it in the browser make the iframe wider (the scrollbar moves to the right) and wrap it into a dynamic panel to crop it.

#3

If you want to show it in the browser make the iframe wider (the scrollbar moves to the right) and wrap it into a dynamic panel to crop it.

Can you please elaborate on this part? I don’t get the wrapping part, I just add a Dynamic Panel and then I make it smaller than the iframe?

If you could explain it in a step-by-step way it would be awesome, thanks for the tip!

#4

rightclick the iframe, choose convert to dynamic panel. now the iframe is inside a dynamic panel. if you now reduce the panels width to the original width the scrollbar is cropped. if you still can see parts of the scrollbar click inside the dynamic panel and make the iframe wider.

#5

Great! Thank you so much, it worked like a charm!

#6

@Gregor I tried your solution but found that the very bottom of my content gets cut off, and it seems the amount that gets cut off is exactly the size of the horizontal scrollbar that would be on the bottom.

Any solution? Thank you so much for your wisdom.

#7

enlarge iframe and wrapper, if necessary add transparent (not hidden) elements at the bottom.

#8

@Gregor thanks for the suggestion of adding a transparent element at the bottom.

#9

This workaround doesn’t work anymore. The cropped dynamic panel is visually expanded by the width, the visible scrollbars would have, without showing them but showing only white space.

image.png466×894 14.4 KB

Is there any help? Thank you!

#10

Hi FPFAFF,

Hmm, I’m having a little trouble understanding the problem. Could you post your RP file here for me to test? Please also let me know the mobile device you’re trying to view the prototype on, e.g. iPhone 6, iPhone X, etc, as well as the version of iOS. Thanks!

#11

Hello Jane_Axure.

RP file

rp-test.rp (208.2 KB)

image.png430×868 23.1 KB

I faked the mobile devices within the rp file (please click on the pink icon, the page will reload in a new tab) - i am looking at it in the chrome browser.

Kind regards
FPFAFF

#12

Hi FPFAFF,

Thanks for sharing your RP file! What’s strange is that I was only able to reproduce what you were seeing (your screenshot) by previewing the page on my external monitor, rather than my main MacBook display. When viewing on my main MacBook display, the iframe was contained inside the dynamic panel container. When moving the previewed page to my external monitor, however, the iframe resized to its actual size, rather than the size of its DP container. It looks like this is specific to Chrome - i.e. I’m not able to reproduce this in Firefox or Safari - and I’ve filed this with our QA team for further investigation.

In the meantime, one workaround would be to remove the iframe and instead use a dynamic panel with scrollbars to wrap the content. Then, encompass the DP into another DP and resize the outer DP to hide the inner DP’s scrollbars. Another alternative may be to view the project in another browser other than Chrome.

I’ve attached an edited version of your file to demonstrate the first workaround. Hope it helps a bit!

rp-test_EDIT.rp (259.1 KB)

#13

Thank you, I’ll give it a try.

#14

I’ve tried with a nested Dynamic Panel. I have 2 dynamic panels. The deeper one with my content and a DP above, reduced in size. That’s ugly and dirty but it works. (RP9)