Chrome App webview and touch scroll propagation

Question

I am in the happy position of replacing a Windows 8 Metro app with a Chrome packaged app. For the time being, it needs to mimic the look and feel of the Metro app. The main page consists of multiple webviews arranged horizontally with a large amount of horizontal scrolling possible. I have run into a problem when attempting to scroll horizontally using a touch device. If the scroll gesture starts on a webview, it is capturing the scroll event and preventing the host from scrolling. Overflow is hidden on all of the webviews. As they form the bulk of the content on the page then the valid scroll targets for the host are limited.

The webview contents are interactive so I can't get away with placing a transparent overlay over the scrollable content to capture the event, at least not without some way to propagate the clicks/touches through to the webviews themselves.

Any ideas on how this could be achieved?

Thanks for your help!

Answer 1

I'm going to assume a couple things here: Styling a Chrome app is similar to styling a webpage. Your current scrolling solution relies on using overflow:hidden and using JavaScript only to scroll.

I fixed something similar once for a page. Its strange but I learned that for touch devices, a scrollbar is invisible unless the user interacts with it. If you change the style to overflow-x: scroll...a scrollbar will appear (and you'll need to deal with that later for desktop with Modernizr or some similar way to detect touch enabled device). Then comment out your scrolling code (temporarily of course because you'll need it for non-touch). If it scrolls fine with the overflow change and the scrolipt change then all you need to do next is to detect touch and conditionally turn on the script and change overflow appropriately.