iFrames scrollables en iOS

Durante mucho tiempo, muchos desarrolladores se vieron frustaron al intentar que elementos con overflow fueran scrollables en páginas web que se ejecutaban en Safari, en el sistema operativo iOS. Yo para esta página también lo he intentado y me fue realmente imposible. ¿Para qué concretamente? Pues porque no puedo mostrar las demos de los códigos de los que hablamos aquí en un iFrame aislado en la parte superior del artículo en sí, con el fin de no afectar a la estrategia del AJAX pageload de este sitio web. Algunas investigaciones han revelado que sólo hay dos propiedades CSS para establecerlo y un elemento para llevarlo a cabo. ¿Estás preparado? ¡Pues vamos a ello!

El HTML

En el caso de un iFrame y todos los demás elementos HTML, tendrás que envolver al elemento con otro elemento como por ejemplo, un div:

 
<div class="scroll-wrapper">
	<iframe src=""></iframe>
</div>

Este div servirá como base contenedora para lo que queremos hacer scroll dentro.

El CSS

Una propiedad que nos es familiar y otra que nos es un poco desconocida, las usaremos para permitir el scroll en un iFrame. Atento al código:

.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
  	overflow-y: scroll;

	/* importante:  dimensiones o posicionamiento aqui */
}

.scroll-wrapper iframe {
	/* nada! */
}

La propiedad y el valor -webkit-overflow-scrolling: touch; fueron creadas concretamente para los casos de elementos con overflow a los cuales queremos hacer scroll para ser reproducidos por un navegador. Sin esto, la página hará scroll cuando hagas scroll dentro del área del iFrame, con esto tendrás el control total de iFrame. Por si os lo estáis preguntando, en mi caso he utilizado esto:

.demo-iframe-holder {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}

Ten siempre a mano este trozo de código ya que te será muy útil a la hora de hacer scroll en iFrames en iOS. Y sobre todo recuerda que el CSS especial va dentro del envoltorio y no en el elemento en el que queremos hacer scroll. Esto es muy importante.

Y este ha sido el artículo en el que trataba explicaros como llevar a cabo iFrames scrollables en iOS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO