ejemplo - Iframe desplazamiento iOS 8
iframe video (10)
Tengo un iframe y necesito que tenga un desbordamiento de desplazamiento. parece funcionar en el escritorio, utilicé una solución para que funcione en iOS. funciona en Android e iOS ahora. sin embargo, iOS8 falla.
<html>
<body>
<style type="text/css">
.scroll-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
¡A mi no me sirvió! pero pude descubrir un pequeño truco después de leer esta publicación: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/
¡Simplemente ponga una! Importante después de eso y funciona bien!
-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
Descubrí que las correcciones 1 y 2 funcionan en iOS 11, pero también encontré que al cargar una página sensible en el iframe, overflow-x: hidden; también fue necesario para evitar que el iframe se moviera hacia la izquierda y hacia la derecha en los intentos de desplazamiento y. Solo para tu información.
El deber es definir su scroll-container para fixed para el div es un tamaño de pantalla completa. Luego, dentro del iframe crea un contenido principal que tenga un desplazamiento de propiedades.
Dentro de ti iframe, en mainContainer-scroll , puedes agregar:
-
-webkit-overflow-scrolling: touch// Para desplazamiento activo suave -
-webkit-transform: translate3d(0, 0, 0)// Para la aceleración del material -
overflow-y:scroll;// Para agregar el desplazamiento en el eje y -
position:absolute;height:100%;width:100%;top:0;left:0;// Para arreglar el contenedor
Pagina principal
<html>
<head>
<style type="text/css">
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
position:fixed;
}
</style>
</head>
<body>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
</html>
Dentro de Iframe
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
<div class="Content" style="height:2000px;width:100%;background:blue;">
</div>
</div>
Finalmente conseguí que el mío funcionara después de muchas horas y pruebas. Básicamente, lo que funcionó para mí fue esto (que se muestra como estilo en línea para demostración). Hacer el desbordamiento de div externo evita que muestre un conjunto adicional de barras de desplazamiento en los escritorios.
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>
Hay un error en iOS 8 que rompe al desplazarse por todos juntos cuando -webkit-overflow-scrolling: touch se ha aplicado a todo lo que se ha desbordado.
Eche un vistazo al problema que publiqué hace unas semanas: -webkit-overflow-scrolling: touch; se rompe en iOS8 de Apple
Para hacer que un iframe se pueda desplazar en iOS, debe agregar la propiedad CSS3 -webkit-overflow-scrolling: touch en el contenedor primario:
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
Pude hacer un desplazamiento de iframe en iOS colocando un iframe dentro de un div (que actúa como contenedor) y aplicando los estilos de la siguiente manera, y esto funciona perfectamente.
.iframe {
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
}
.div {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #FFF;
}
Como estoy trabajando en GWT, para la gente de GWT aquí está la sugerencia. En el caso de GWT simplemente coloque un iframe en ScrollPanel (div) y aplique los estilos como se indica arriba.
Sin saber qué hay al otro lado de "www.iframe.com" ... pero para mí, en el css de ese archivo agregué:
body {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
Eso lo solucionó
Tienes que usar el estilo corporal o el desbordamiento: desplazamiento;
O también use
<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>
Usa el código de esta manera
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>