Scrolling text box on mobile device

Mobile
1

I have a text box in one scene with a decent amount of text. In order to keep it legible on smaller devices (e.g. iPhone) I set the text box attribute “Content Overflow” to scrollbars. This works fine when I test it in a browser with a small window, but when I use Hype Reflect on my phone, I find it’s very hard to scroll the text. You have to very precisely touch the text itself (not, for example, the space between paragraphs). And sometimes, it even mistakes my attempt at scrolling for a swipe up or down.

Any help, thoughts, or suggestions for making this easier/better!? Thanks!

2

One thing that might help is if you set a color on the text box (it can be the same color as the item below) – this might give iOS devices something to grab onto.

3

Thanks! I actually (inadvertently) tried that already. No dice.
I thought maybe grouping it with an actual shape/box might work… but not quite sure how I would pull it off.
Any other suggestions/ideas to try?
Thanks again.

4

There’s a few libraries which try to improve scrolling for iOS. Check out this one: http://cubiq.org/iscroll-5 – it’s updated pretty frequently.

From a technical standpoint, we set -webkit-overflow-scrolling: touch; on elements with text that overflows its bounds, so we’re telling iOS to do the right thing.

1 Like
5

Thanks, I’ll give iScroll a shot (although I’ll need to read through the javascript documentation first…)

6

try this on mobile device~
https://dl.dropboxusercontent.com/spa/85l23ep4h70zflp/Exports/scroll%20example/scroll%20example.html

and to see how i did it.
scroll example.hype.zip (46.7 KB)

1 Like
7

Great! Clean solution. I’ll use it. Thanks.

8

Thanks, @jameskoh! I actually used this trick on a different project. The challenge in this case is that the text box is floating over a background image. So for it to work here, I’d have to slice up the background image to make a top and bottom slice to hide the elongated text box. Not a bad option if necessary, but I was hoping for something a bit more elegant. Thanks again for the suggestion & the demo hype doc.

9

try:
rectangle within hype overflow auto + you’re text within a div-element as innerhtml
so you scroll the div not the txt. just a idea not tested.

could also be done with nested hypeelements though …

10

i´ve tested iscroll only putting iscroll.js into hype. then in the innerHTML paste

<div id="wrapper">YOURTEXT</div>

thats all - you don´t have to fix anything.

11

Thanks, @h_classen. Tried it. No dice.

12

@strmiska, trying to try this but I’m not really sure how to “put” scroll.js “into” hype. I tried adding it as a file to the Resources, but that didn’t work. I tried pasting it into “add new Javascript function” by changing “UntitledFunction” to “iscroll” and pasting the code inside, but that doesn’t seem to work. I’m sure it’s just a simple thing I don’t know how to do, so I’d appreciate any step-by-step guidance you can provide. Thank you thank you!

13

here´s my example - just drag the scroll.js into the ressource folder. it is written automatically into the <head>-tag.
create an onLoadFunction:

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

give the text-rectangle the id “wrapper”

that´s all
iScroll.hype.zip (50.5 KB)

1 Like
14

That did it! The demo was perfect. But it wasn’t working at first when I tried to copy it over (or replicate it) - and it was driving me crazy! Until I realized I hadn’t created the “On Scene/Layout Load” and selected “iScroll”.

Thank you @strmiska for the step-by-step, and thanks @Daniel for first suggesting iScroll. (Any consideration to bake this functionality into a future release?)

Problem: Solved!

15

cool. i use this webkit for ios - scrolling. its better, because you also are able to scroll grouped elements, created in hype

16

You know, as soon as I posted my last response and continued working on the project, the scrolling stopped working… :frowning:
May be good reason to check out this other option you mentioned…

17

If you have time, can you tell me how to use that solution? (where to insert that code?) Thanks!

18

here´s an example.
smoothTextScroll.hype.zip (49.2 KB)

19

This was really helpful, thanks!!

Again I faced a situation where your demo was perfect, but I wasn’t able to implement in my project. Then I finally realized what the issue was. I had set up “On Swipe Up” and “On Swipe Down” to do something innocuous like continue the main timeline to prevent the whole scene from rubber-banding up and down. But it looks like that was interfering with the scrolling. A small sacrifice to make.

Thanks again!!

1 Like
20

Hi strmiska

I have tryed these scrolling … works fine … but as soon as you copy and past it to initiate another scrolling text, i.e. in a symbol … does´nt work.
What am I doing wrong ?iScroll-2x.hype.zip (2.4 MB)