iphone - organizar - ¿Cómo puedo desplazar un iframe en iOS 4 con 2 dedos?
organizar aplicaciones iphone desde itunes (1)
He encontrado muchas preguntas relacionadas, pero ninguna con una respuesta que explique cómo desplazar un iframe con el método de 2 dedos en iOS 4.
Puedo desplazar un div con 2 dedos configurando un atributo de width y height y overflow: scroll; configuración overflow: scroll; . Aquí hay un ejemplo más completo de esto:
<div style=''width: 280px; height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch;''>
Just imagine a bunch of content is in here, spanning well over 200px
worth of height. You can scroll this just fine in iOS 4 by using 2
fingers, or in iOS 5 by swiping 1 finger thanks to
"-webkit-overflow-scrolling: touch;".
</div>
Este mismo método no funciona en iframes en mi iPad 1 con iOS 4.3. Aquí hay un ejemplo completo que no se desplazará con ninguna combinación de dedos en iOS 4 (aunque, por supuesto, el -webkit-overflow-scrolling permite trabajar en iOS5):
<html>
<head>
<style type="text/css">
#scroller {
width: 280px;
height: 200px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#scroller iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="scroller">
<iframe src="content.html">content.html is a big list of nonsense.</iframe>
</div>
</body>
</html>
Debo añadir que puedo hacer que el desplazamiento con dos dedos funcione si configuro el width y la height del iframe a los valores de píxel reales, como la height: 1000px; , pero nunca sabré qué tan alto será el contenido del iframe. Entonces, tal vez la verdadera pregunta es ¿cómo puedo convencer a Safari móvil en iOS 4 de que el iframe dentro de este div es de hecho más grande que 280x200 píxeles?
Una idea simple publicada por rossb @ github.com/fancyapps funcionó maravillosamente para ambos desplazamientos en iOS 4 (2 dedos) y iOS 5 (1 dedo) y resuelve los problemas de "contenido en blanco en desplazamiento" que los marcos flotantes de iOS 5 parecen estar plagados de . Básicamente, no desea que el iframe maneje ningún desplazamiento. Dale un ancho / alto fijo y envuelve el contenido desplazable en tu archivo incluido en un div que se puede desplazar.
Aquí hay un ejemplo:
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>