Adobe Indesign - Overlay dei contenuti Web - Prevenire il gorgogliamento dell'evento a scorrimento

Question

Ho una rivista InDesign che contiene un overlay di contenuti web (indicando un sito Web reattivo). Tutto funziona bene a parte quando si tratta di scorrere.

È richiesto solo lo scorrimento verticale (su e giù), orizzontale non lo è.

Problema

Quando l'utente scorre a sinistra o a destra, la pagina della rivista cambia e il contenuto Web si chiude.

Domanda

Esiste un modo in cui posso impedire agli eventi di scorrimento di propagare fino alla rivista dalla sovrapposizione dei contenuti web? Preferibilmente, ciò sarebbe fatto dal contenuto web stesso (ad esempio usando JavaScript) come significherebbe che dovrei modificare solo in un posto, piuttosto che su ogni pagina il contenuto web viene mostrato.

Tentato

• Catturare il touchmove evento sul corpo della pagina e chiamate stopPropagation() su di esso.
• Chiamata preventDefault() sull'evento (questo interrompe qualsiasi scorrimento).
• Usando Pagex on touchmove eventi e chiamate preventDefault() Su chiunque sembrano essere colpi orizzontali (troppo inaffidabili).
• Usando CSS overflow-x: hidden
• Gli eventi di scorrimento personalizzati di JQuery Mobile.
• Qualche altra combinazione di quanto sopra.

Answer 1

Trovato una soluzione. Innanzitutto, inserire un file <meta> viewport tag nella testa:

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

Nota che ho impostato una larghezza statica di 701, questo è importante. La larghezza di Overlay Web è 700px. Impostazione di una larghezza di 701 significa che la pagina può muoversi leggermente. Questo wiggle significa che il colpo a sinistra/destra viene catturato e non percolato fino a InDesign. C'è un leggero turno (da un pixel) se scorrono, ma è minore rispetto alla pagina di cambiamento.

Quindi, aggiungi il seguente CSS ai tuoi contenuti:

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

Potrebbe non aver bisogno di questo CSS, ma era necessario per noi.