Chrome App Web Browsing and Touch Scrolling Distribution

Question

I am in a happy position to replace the Windows 8 Metro app with a Chrome app. Currently, it should mimic the look of the Metro app. The main page consists of several web views arranged horizontally with a lot of horizontal scrolling. I had a problem scrolling horizontally using a touch device. If the scroll gesture starts with a webview, it captures the scroll event and prevents the host from scrolling. Overflow is hidden in all web views. Because they make up the bulk of the content on the page, valid host scrolling goals are limited.

The content of the webview is interactive, so I can’t get away with placing a transparent overlay over the scrollable content to capture the event, at least not in a way that spreads the clicks / touches to the webview itself in any way.

Any ideas on how this can be achieved?

Thanks for your help!

Answer 1

I'm going to take a couple of things here: Styling a Chrome application is similar to styling a web page. Your current scroll solution is based on using overflow: hidden and using JavaScript only for scrolling.

I set something like this once for the page. Strange, but I found out that for touch devices the scroll bar is invisible if the user does not interact with it. If you change the style to overflow-x: scroll ... a scroll bar will appear (and you will have to deal with this later for the desktop using Modernizr or in some other way to detect a touch device). Then comment out your scrollable code (temporarily, of course, because you will need it for not touching). If it scrolls with an overflow change and a scroll change, then all you need to do next is to detect the sensor and conditionally enable the script and change the overflow accordingly.

Answer 2

If you can use jQuery to achieve it, do it so that when the cursor is not over the webviews, it will apply the scroll event to the page itself.