PhoneGap/Cordova: evitar el desplazamiento horizontal

Tengo una aplicación creada en Cordova y en algunas de mis páginas puedo desplazarme horizontalmente fuera de mi contenido hacia el espacio en blanco.PhoneGap/Cordova: evitar el desplazamiento horizontal

Esto es raro ya que no tengo nada que se extienda más allá de mi #wrapper, que se establece en width: 100%.

¿Entonces me preguntaba si había una manera de deshabilitar el desplazamiento horizontal en la aplicación?

ACTUALIZACIÓN:

Código en la página solicitada:

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

Fuente

2012-06-26 MeltingDog

¿Se está desplazando el efecto rebote de contenido? – nhahtdh

@nhahtdh no, se comporta como si un div se extendiera fuera del envoltorio; simplemente se desplaza ligeramente hacia el espacio en blanco – MeltingDog

Parece que no puedo reproducir el problema en el dispositivo. ¿Puedes publicar una captura de pantalla? – nhahtdh

intenta depurar su página en Chrome (WebKit) con las dimensiones exactas de su dispositivo. Esto resuelve la mayoría de los problemas de renderizado para mí.

No conozco el problema específico aquí, pero parece que uno de sus elementos fluye fuera del envoltorio. Por ejemplo, podría intentar esto en su css:

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

A pesar de que podría ser una mejor idea para saber por qué su página se expande horizontalmente?

Fuente

2012-07-04 09:36:43

Sí, gracias Justus. Era un ancho de cuerpo incorrecto en mi iphone CSS específico – MeltingDog

Confirmado que esta es la solución correcta con Cordova 6.3.1, ejecutándose en Android 6 y 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; 
    } 
});

Fuente

2012-09-25 07:39:59

¡Muchas gracias! –

Trate de añadir el siguiente código a su archivo html:

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

Fuente

2013-03-26 18:37:53 Gustus

Esto ha impedido incluso el desplazamiento vertical. –

cómo quitar este lsitener después de eso probé removeeventlistener pero aún no está desplazándose –

que estaba buscando la solución a este problema desde hace mucho tiempo. Finalmente lo resolví de la siguiente manera. puse estilo para body y html tags:

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

Después de que he añadido a divbody y cambiar el estilo de ella:

overflow-y: auto; 
height: 100%;

cuerpo fijo lo tanto, he conseguido, que contiene div con barra de desplazamiento vertical.

Fuente

2015-07-09 14:19:17

En aras de la exhaustividad, pensé que la respuesta que hace uso del método oficial de hacer tal cosa a través de la etiqueta preference debe añadirse:

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

compatibles con Android y el IOS según la documentation.

por defecto: false

establece en true si no desea que la interfaz para mostrar cualquier información cuando los usuarios se desplazan más allá del principio o al final del contenido. En iOS, los gestos de sobredesarrollo hacen que el contenido regrese a su posición original. en Android, producen un efecto brillante más sutil a lo largo de la parte superior o inferior del contenido.

Fuente

2017-07-13 13:35:32 Script47

Nota: en el sentido técnico, esto es correcto, pero algunas personas pueden experimentar muy pequeñas sobredesplazamiento (en mi caso fue un solo píxel), y [ esta respuesta] (https://stackoverflow.com/a/31320257/2374365) trabajó con esto –

PhoneGap/Cordova: evitar el desplazamiento horizontal

Respuesta

Cuestiones relacionadas