javascript - Chrome App webview and touch scroll propagation - Stack Overflow

admin管理员组

文章数量:1340361

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!

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!

• javascript
• html
• webview
• google-chrome-app

Share Improve this question Follow edited Aug 4, 2015 at 11:42 Mousey 1,8652020 silver badges3535 bronze badges asked Aug 11, 2014 at 15:16 powskipowski 48933 silver badges44 bronze badges 4

• Maybe someone will e 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 Commented Aug 12, 2014 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 Commented Aug 13, 2014 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 Commented Feb 22, 2015 at 20:11
• @Elle This was a harmful edit and was rolled back. A webview is a technical term, here specifically referring to a <webview> tag. – Xan Commented May 28, 2015 at 9:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 ment 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.

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.

本文标签： javascriptChrome App webview and touch scroll propagationStack Overflow