I've got an InDesign magazine which contains a Web Content Overlay (pointing to a responsive web site). Everything works fine apart from when it comes to scrolling.
I'm running the magazine from an iPad via Adobe Viewer. Only vertical scrolling (up and down) is required, horizontal isn't.
When the user swipes left or right, the magazine's page changes and the web content closes.
Catching the touchmove event on the page's body and calling stopPropagation() on it.
Calling preventDefault() on the event (this stops any scrolling at all).
Using pageX on touchmove events and calling preventDefault() on any ones that look to be horizontal swipes (too unreliable).
Using CSS overflow-x: hidden
jQuery Mobile's custom scroll events.
A few more combinations of the above.
Found a solution. First, insert a `<meta>` `viewport` tag in the head:
<meta name="viewport" content="width=701, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no" />
Note that I've set a static width of `701`, this is important. The web content overlay's width is `700px`. Setting a width of `701` means that the page can move ever so slightly. This wiggle means that the swipe left/right is caught and not percolated up to InDesign. There is a slight shift (by a pixel) if they do swipe, but it's minor compared to changing page.
Next, add the following CSS to your content:
You may not need this CSS, but it was necessary for us.