Adobe InDesign - Web Content Overlay - Prevent Scroll Event Bubbling

Question

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.

Only vertical scrolling (up and down) is required, horizontal isn't.

Problem

When the user swipes left or right, the magazine's page changes and the web content closes.

Question

Is there any way that I can prevent scroll events from propagating up to the magazine from the web content overlay? Preferably, this would be done from the web content itself (e.g. using JavaScript) as it would mean I would only have to edit in one place, rather than on each page the web content is shown.

Attempted

• 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.

Answer 1

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:

.content {
    -webkit-overflow-scrolling: touch
}

You may not need this CSS, but it was necessary for us.