How to make scrollbar visible all the time in iOS

Getting Started
6

Hello Vic. In the example you sent me the scrollbars aren’t not always on, I want them to be visible as soon as my scene hit the screen

7

I want a scroll bar beside my scrollable text all the time

8

Is that possible to achieve?

9

You mean even when there is no need for a scrollbar? I’m happy to help but I’m not sure what you exactly want. Can you draw up an example perhaps?

10

Here is what I get now on my iPhone when I see my app (screen 1.png)

screen 1.png720×1280 433 KB

11

all the text part in the middle ( from analyse to de) is a scrolable text. I would like the viewer to see that right away by having a scoll bar on the right side of the text as in fig 2 (creen 2.jpg)

screen-2.jpg720×1280 333 KB

12

This way the reader would know that there is more text in that page. Am I clearer?

13

Yes! However, iOS ‘hides’ the scrollbars by default (its part of their Human Computer Interaction Guide) so my guess would be that your problem lies herein.

A quick search on Stack Overflow shows that there aren’t a lot of quick fixes. You can try an external JS-lib (jqueryUI for instance or iScrol: http://cubiq.org/iscroll-5) but this requires knowledge of coding.

Another solution would be to use a simple visual cue to show that the user can scroll, for instance a small arrow or ‘scroll for more’ text.

I do think you need to code to fit a more complex solution. You want to override basic iOS behaviour which, in my experience, is a pain in the butt.

14

I already have this iscroll js script

var myScroll = new IScroll(’#wrapper’, {
mouseWheel: true,
scrollbars: true
});

Wouldn’t it be possible to put a line in there so the scrollbar are always visible?

15

http://iscrolljs.com/#scrollbars

fadeScrollbars: false perhaps? I can’t test this for you right now (I’m not in the office anymore), but give it a go.

16

If iScroll doesn’t provide a solution, this seems to work (with a working demo): http://simurai.com/blog/2011/07/26/webkit-scrollbar

However it requires some CSS skill, it’s probably not that complex, I can setup a demo for you tomorrow.

17

Thanks Vic, waiting to ear from you tommorow

18

I fixed it, I think.

Preview: https://oneuppedgames.com/clients/hype/iosscrollbars/
Download: https://oneuppedgames.com/clients/hype/iosscrollbars/iosscrollbars.hype.zip

It’s a small piece of CSS you need to add to your project, this is rather easy:

  • go to Document in your inspector

  • click on Edit Head HTML

  • paste the following code beneath the <meta name=“viewport”… line:

    ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }

Also make sure your div or paragraph has the proper styling:

  • select textbox or paragraph
  • go to Metrics in your inspector
  • select Auto Scrollbars in the Content Overflow

Best of luck!

1 Like
19

Hello Vic. It is perfect, you nailed it!!! Thanks

1 Like
20

Good to know! :slight_smile:

21

Hi Marts and Vic,
I tried this on my file and it works great on the desktop but when I test it out on the iPad I’m still not seeing the scroll bars.

Attached is my project. I would like to see the scrolls on the Audio Frame symbol in the Seminole Voices Scene. What am I missing in my code?

Thank youSeminoleVoices.hypetemplate.zip (941.5 KB)

22

Can you make sure a document was attached?

23

I reattached it. I deleted all the audio to make it small enough to upload. Thank you :blush:

24

Hi Marts, did you make this app in the end? I would really like to use it, could you please send me a link?

25

Yes it is available in the app store or google play under the name Agro100