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!
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.
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.
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.
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.
@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!
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?)
You know, as soon as I posted my last response and continued working on the project, the scrolling stopped working…
May be good reason to check out this other option you mentioned…
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.
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)