Adobe InDesign - superposición de contenido web - prevenir el burbujeo de eventos de desplazamiento

Question

Tengo una revista InDesign que contiene una superposición de contenido web (apuntando a un sitio web receptivo). Todo funciona bien aparte de cuando se trata de desplazarse.

Solo se requiere desplazamiento vertical (arriba y abajo), horizontal no.

Problema

Cuando el usuario desliza hacia la izquierda o hacia la derecha, la página de la revista cambia y el contenido web se cierra.

Pregunta

¿Hay alguna forma de evitar que los eventos de desplazamiento se propagen a la revista desde la superposición de contenido web? Preferiblemente, esto se haría con el contenido web en sí (por ejemplo, usando JavaScript), ya que significaría que solo tendría que editar en un solo lugar, en lugar de en cada página se muestra el contenido web.

Intentó

• Atrapando el touchmove evento en el cuerpo y llamadas de la página stopPropagation() en eso.
• Vocación preventDefault() en el evento (esto deja de desplazarse en absoluto).
• Usando Pagex en touchmove eventos y llamadas preventDefault() en cualquiera que parezca ser deslizantes horizontales (demasiado poco confiables).
• Usando CSS overflow-x: hidden
• Eventos de desplazamiento personalizados de JQuery Mobile.
• Algunas combinaciones más de lo anterior.

Answer 1

Encontró una solución. Primero, inserte un <meta> viewport Etiqueta en la cabeza:

<meta name="viewport" content="width=701, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no" />

Tenga en cuenta que he establecido un ancho estático de 701, esto es importante. El ancho de la superposición de contenido web es 700px. Estableciendo un ancho de 701 significa que la página puede moverse muy ligeramente. Este meneo significa que el deslizamiento a la izquierda/derecha es atrapado y no percolado hasta Indesign. Hay un ligero cambio (por un píxel) si se deslizan, pero es menor en comparación con la página cambiante.

A continuación, agregue los siguientes CSS a su contenido:

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

Es posible que no necesite este CSS, pero fue necesario para nosotros.