48

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!

Mousey
  • 1,855
  • 19
  • 34
powski
  • 489
  • 3
  • 4
  • Maybe someone will come up with something, but I have my doubts that this is possible. You might try to attach various event handlers to the webviews to see if you can propagate the events upward. – Marc Rochkind Aug 12 '14 at 13:13
  • Yeah, it's looking that way unfortunately. I've managed to get scroll working with an overlay and am able to post click coordinates through to webviews to execute. It limits the functionality of the webview contents, but it's a start. Still far more fun than writing for winJS! – powski Aug 13 '14 at 21:50
  • I know this question is old but from my experience webviews or subelements with scrollable content scroll & stoppropagation of event until they have scrollable area. And when scrollable area is finished, elements will propagate event to parent elements. Therefore, you can just hide or disable scollable content of webviews when a scroll event starts, which will help propagate scoll event to main frame. – fatih Feb 22 '15 at 20:11
  • @Elle This was a harmful edit and was rolled back. A webview is a technical term, here specifically referring to a `` tag. – Xan May 28 '15 at 09:05

2 Answers2

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.

DarthDerrr
  • 461
  • 3
  • 9
  • One more thing. Its possible that for some devoces, the scrollbar will still be visible. Just need to test. – DarthDerrr Jul 26 '15 at 22:58
0

If you can use jQuery to achieve it, make it so when the cursor is not on top of the webviews, it will apply the scrolling event to the page itself.

Ted
  • 580
  • 4
  • 22