PhoneGap/Cordova: impedisce lo scorrimento orizzontale

Ho un'app costruita su Cordova e su alcune delle mie pagine riesco a scorrere orizzontalmente dal mio contenuto nello spazio bianco.PhoneGap/Cordova: impedisce lo scorrimento orizzontale

Questo è strano perché non ho nulla che vada oltre il mio #wrapper, che è impostato su width: 100%.

Quindi mi chiedevo se c'era un modo per disabilitare del tutto lo scorrimento orizzontale nell'app?

UPDATE:

codice a pagina come richiesto:

body { 
    background-color: #fff; 
    font-family:Arial, Helvetica, sans-serif; 
    color: #b7b8b9; 
    height: 100%; 
    width: 100%; 
} 

iframe{ 
    border: none; 
    width: 100%; 
    /*margin-top: 50px;*/ 


    } 

#header{ 
    height: 50px; 
    width: 100%; 
} 


<body> 
     <div id="wrapper"> 
     <div id="header"> 
      <div class="headerback"><a href="index.html">Home</a></div> 
      <div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('<a href="'+pathname+'">Refresh</a>')</script></div> 
      <div class="headertitle"><h2>Get the Look</h2></div> 

     </div><!--HEADER--> 
    <iframe src="http://www.mbff.com.au/getthelook"></iframe> 
    </div> 
    </body>

This is what happens on horizontal scroll

fonte

2012-06-26 MeltingDog

Sta uscendo dall'effetto di rimbalzo del contenuto? – nhahtdh

@nhahtdh no, si comporta come se un div si estendesse dal lato del wrapper - scorre semplicemente nello spazio bianco leggermente – MeltingDog

Non riesco a riprodurre il problema sul dispositivo. Puoi pubblicare uno screenshot? – nhahtdh

tenta di debug la pagina in Chrome (WebKit) con le dimensioni esatte del vostro dispositivo. Questo risolve la maggior parte dei problemi di rendering per me.

Non conosco il problema specifico qui, ma sembra che uno dei tuoi elementi stia fuori dal wrapper. Si potrebbe per esempio provare questo nel vostro css:

div.wrapper { overflow: hidden; width: inherit; }

anche se potrebbe essere un'idea migliore per scoprire il motivo per cui la pagina è in espansione in orizzontale?

fonte

2012-07-04 09:36:43

Sì, grazie Justus. È stata una larghezza del corpo errata sul mio iPhone specifico CSS – MeltingDog

Confermata questa è la correzione corretta con Cordova 6.3.1, in esecuzione su Android 6 e 7 –

// Phone Gap disable only horizontal scrolling in Android. 

// Add this code in your Phone Gap Main Activity.Initially Declare the variable 

private float m_downX; 

//Then add this code after loadUrl 

this.appView.setOnTouchListener(new View.OnTouchListener() { 
    public boolean onTouch(View v, MotionEvent event) { 

     switch (event.getAction()) { 
      case MotionEvent.ACTION_DOWN: { 
       // save the x 
       m_downX = event.getX(); 
      } 
      break; 

      case MotionEvent.ACTION_MOVE: 
      case MotionEvent.ACTION_CANCEL: 
      case MotionEvent.ACTION_UP: { 
       // set x so that it doesn't move 
       event.setLocation(m_downX, event.getY()); 
      } 
      break; 
     } 
     return false; 
    } 
});

fonte

2012-09-25 07:39:59

Grazie mille! –

Prova ad aggiungere il seguente codice al file .html:

document.body.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
}, false);

fonte

2013-03-26 18:37:53 Gustus

Ciò ha impedito anche lo scorrimento verticale. –

come rimuovere questo lsitener dopo che ho provato removeeventlistener ma ancora non è scorrevole –

che stavo cercando la soluzione a questo problema per lungo tempo. Finalmente l'ho risolto nel modo seguente. Ho impostato stile per body e html tags:

position: fixed; 
width: 100%; 
height: 100%; 
overflow: hidden;

Dopo che ho aggiunto div-body e impostare lo stile per esso:

overflow-y: auto; 
height: 100%;

corpo fisso Così, ho ottenuto, che contiene div con barra di scorrimento verticale.

fonte

2015-07-09 14:19:17

Per ragioni di completezza, ho pensato dovrebbe essere aggiunta la risposta, che si avvale del metodo ufficiale di fare una cosa del genere tramite il tag preference:

<preference name="DisallowOverscroll" value="true"/>

supportate da Android e iOS, secondo il documentation.

predefinito: false

Impostare su true se non si desidera che l'interfaccia per visualizzare tutte le risposte quando gli utenti scorrono oltre l'inizio o la fine di contenuti. Su iOS, i gesti di overscroll fanno sì che il contenuto rimbalzi alla sua posizione originale. su Android, producono un effetto luminoso più sottile lungo il bordo superiore o inferiore del contenuto.

fonte

2017-07-13 13:35:32 Script47

Nota: nel senso tecnico, questo è corretto, ma alcune persone possono sperimentare overscrolling molto piccolo (nel mio caso si trattava di un singolo pixel), e [ questa risposta] (https://stackoverflow.com/a/31320257/2374365) ha funzionato con questo –

PhoneGap/Cordova: impedisce lo scorrimento orizzontale

risposta

Problemi correlati