Adobe InDesign - superposition de contenu Web - Empêchez l'événement de défilement bouillonnant

Question

J'ai un magazine InDesign qui contient une superposition de contenu Web (pointant vers un site Web réactif). Tout fonctionne bien en dehors du moment de faire défiler.

Seul le défilement vertical (de haut en bas) est requis, l'horizontal n'est pas.

Problème

Lorsque l'utilisateur glisse à gauche ou à droite, la page du magazine change et le contenu Web se ferme.

Question

Existe-t-il un moyen d'empêcher les événements de défilement de se propager jusqu'au magazine à partir de la superposition de contenu Web? De préférence, cela serait fait à partir du contenu Web lui-même (par exemple, en utilisant JavaScript) car cela signifierait que je n'aurais qu'à modifier en un seul endroit, plutôt que sur chaque page que le contenu Web est affiché.

Tentative

• Attraper le touchmove événement sur le corps de la page et appel stopPropagation() dessus.
• Appel preventDefault() sur l'événement (cela arrête tout défilement).
• Utilisation de Pagex sur touchmove événements et appel preventDefault() sur ceux qui semblent être des balayages horizontaux (trop peu fiables).
• Utilisation de CSS overflow-x: hidden
• Les événements de défilement personnalisés de JQuery Mobile.
• Quelques combinaisons supplémentaires de ce qui précède.

Answer 1

Trouvé une solution. Tout d'abord, insérez un <meta> viewport Tag dans la tête:

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

Notez que j'ai défini une largeur statique de 701, c'est important. La largeur de la superposition du contenu Web est 700px. Définir une largeur de 701 signifie que la page peut se déplacer très légèrement. Cette bouchée signifie que le glissement gauche / droit est capturé et non percolé jusqu'à InDesign. Il y a un léger changement (par un pixel) s'ils glissent, mais c'est mineur par rapport à la page à changer.

Ensuite, ajoutez le CSS suivant à votre contenu:

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

Vous n'avez peut-être pas besoin de ce CSS, mais cela nous était nécessaire.