1 Reply Latest reply on Nov 8, 2013 2:39 AM by robcampo

    Adobe InDesign - Web Content Overlay - Prevent Scroll Event Bubbling


      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.




      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.




      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.

        • 1. Re: Adobe InDesign - Web Content Overlay - Prevent Scroll Event Bubbling
          robcampo Level 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.