Adobe Indesign - Webinhaltsüberlagerung - Verhindern Sie das Schriftrollenereignis Blasen

Question

Ich habe ein InDesign -Magazin, das eine Webinhaltsüberlagerung enthält (was auf eine reaktionsschnelle Website hinweist). Alles funktioniert gut, außer wenn es um Scrollen geht.

Es ist nur vertikales Scrollen (nach oben und unten) erforderlich, horizontal ist es nicht.

Problem

Wenn der Benutzer nach links oder rechts wischt, ändert sich die Seite des Magazins und der Webinhalt schließt.

Frage

Gibt es eine Möglichkeit, wie ich verhindern kann, dass Scroll -Ereignisse sich vom Webinhaltsüberlagerung in das Magazin vermehren? Vorzugsweise würde dies aus dem Webinhalt selbst (z. B. mit JavaScript) geschehen, da dies bedeuten würde, dass ich nur an einem Ort bearbeiten müsste, anstatt auf jeder Seite, auf der der Webinhalt angezeigt wird.

Versuchte

• Das fangen touchmove Ereignis auf dem Körper der Seite und anrufen stopPropagation() darauf.
• Berufung preventDefault() Auf der Veranstaltung (dies stoppt überhaupt alle Scrollen).
• Verwenden von Pagex on touchmove Ereignisse und Anrufe preventDefault() auf allen, die horizontal aussehen (zu unzuverlässig).
• Mit CSS overflow-x: hidden
• JQuery Mobile Custom Scroll Events.
• Ein paar weitere Kombinationen der oben genannten.

Answer 1

Fand eine Lösung. Zunächst einfügen a <meta> viewport Tag im Kopf:

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

Beachten Sie, dass ich eine statische Breite von festgelegt habe 701, das ist wichtig. Die Breite des Webinhalts -Overlays ist 700px. Einstellung einer Breite von 701 bedeutet, dass sich die Seite so leicht bewegen kann. Dieses Wackel bedeutet, dass der Swipe links/rechts gefangen und nicht bis zum Indesign vermerkt ist. Es gibt eine leichte Verschiebung (durch ein Pixel), wenn sie wischen, aber es ist geringfügig im Vergleich zu wechselnder Seite.

Fügen Sie als nächstes den folgenden CSS zu Ihrem Inhalt hinzu:

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

Möglicherweise brauchen Sie dieses CSS nicht, aber es war für uns notwendig.