¿cómo hago que el contenido se mueva dinámicamente en un DIV en el safari de Iphone o en el juego web de Android?

Question

mi código:

for(var myLine = 0; myLine < 100; myLine++) 
     document.getElementById("myDiv").innerHTML += "line " + myLine + "<br>"; 


............... 

<div style="position:...etc; overflow:auto;" id="myDiv"></div> 

esto funciona sin ningún inconveniente en todos los navegadores en todas las plataformas no móviles. Sin embargo ... cuando esto se implementa en iPhone (Safari) o Android (webkit) el div se llena con el texto, pero no se genera barra de desplazamiento cuando el texto se extiende más allá del alto del div y el usuario no puede "presionar" el contenido abajo tampoco. Así que el desbordamiento eficaz siempre está "oculto" pase lo que pase.

Tengo curiosidad por si hay algún enfoque alternativo que estoy pasando por alto o si este es solo un error que no tengo forma de evitar en este momento.

Answer 1

Este es un problema conocido en el kit web para dispositivos móviles: http://www.quirksmode.org/webkit.html. Busque overflow.

La solución a esto es iScroll.

Answer 2

En realidad, iOS se está comportando correctamente. El usuario debe usar dos dedos para desplazarse por cualquier área de desplazamiento en una página que no sea toda la página. (de lo contrario, ¿cómo sabría el navegador si el usuario deseaba desplazar un div o su contenedor cuando ambos llenan la pantalla en una página no optimizada).

La mejor manera de evitar la 'característica' es implementar un toque el controlador de eventos que mueve el div cuando el usuario lo toca. Un buen ejemplo de esto en la práctica es el código de ejemplo FingerTips de Apple.

Apple utiliza esta técnica exacta cuando navega por el Safari Developer Library en un iPad.

Answer 3

Creo que el problema está en la configuración de innerHTML y aquí está el post similar.

¿Esa función se llama en iPhone después de que el dom esté cargado y listo?