iphone scrolling

Vaadin 6 / 7 / 8 Framework UI
1

Wanted to share some what I’ve been doing to get my Vaadin app scrolling the way I want in an iPhone browser, for the enjoyment of the community and in case I’m missing something obvious

My vaadin webapp looks like a web page with a vertical scroll bar.

In Vaadin, at least the way I am using it, scrolling happens at the level of the

a few nodes down from the body tag. Seems like this is true with both window.setSizeFull() and window.setSizeUndefined().

In desktop browsers this works fine and I get the scrolling behavior I want.

However on iPhone (and I suspect Android and Blackberry as well) scrolling doesn’t work well. This is so because the content of the body tag is set to not exceed the window size. Since the content of the body tag is set to the window size there is nothing to scroll from the perspective of the body tag.

The problem is a one finger scroll in your iPhone browser tries to scroll the content of the body tag.

If you know to do a two finger scroll to get the iPhone to scroll the v-view div it works. However I wasn’t sure my users would think to do a two finger scroll, its not obvious.

My first approach to enable a one finger scroll for my Vaadin app was to wire up JavaScript event handlers differently to forward scroll events down to the v-view div instead of the body. I found iScroll http://cubiq.org/iscroll which was helpful. Performance wasn’t great however, scrolling was a bit slow and pinch to zoom wasn’t working. I maybe could have taken this further to get it working better.

Instead I decided to try to regain control of the body tag. I am now embedding my Vaadin app inside an HTML page I control, modeled on the multiapp.html sample that comes with the Vaadin distribution. My Vaadin app is embedded in a div inside my HTML page which I allow to take as much space as it needs. The body now has content that overflows the window size and scrolls nicely on iPhone.

So I think that is going to work for me but I would be interested if there is a better way I’m missing?

Thanks
/Craig

2

Hi,

You might want to try TouchScroll add-on from the Directory. It somewhat solves this issue - not only for the main area, but for pretty much all default Vaadin components that have scrollable area in them.

If you need only scrolling for the main content area (e.g. no panels, split panels or tables) your embedding solution will most probably be smoother as it will use hw accelerated scrolling. I hope that TouchScroll at some point is implemented in such a way that it feels as good as the native scrolling in iphone browser.

cheers,
matti

3

Hi Craig,

Vaadin TouchKit add-on might also do some helpful tricks for you. Give it a go if possible and let me know how it went.


http://vaadin.com/directory#addon/vaadin-touchkit

That is the 1.0 version and we are gathering features/bugs for future releases. So if you have some comments or other findings… let us know :slight_smile:

Thanks & Cheers,

Ville