En esta entrada os voy a explicar cómo ocultar el scroll vertical cuando quieres utilizar un  iframe.

Éste es un problema que me ha dado muchos quebraderos de cabeza, sobretodo cuando necesito insertar mis propias páginas o páginas externas en mi WordPress.

Hay veces que, por algún motivo , necesitas insertar en tu WordPress o en tu aplicación, una página externa a través del típico IFRAME.  Damos por hecho que quizás no sea la mejor manera, pero si no tenemos los conocimientos para hacerlo de otra manera, el IFRAME es una buena solución. Al menos temporalmente.

Pero claro, una vez puesto nuestro código HTML del IFRAME, nos podemos encontrar con 2 posibilidades.

• Que el IFRAME tenga una altura fija , por lo que simplemente haya que darle al contenedor esa medida para que todo el contenido quede en su interior.
• Que la altura no sea fija y necesite usar el SCROLL para poder moverse dentro del contenedor. Pero si la web también necesita su propio SCROLL nos encontraremos con esta imagen tan horrenda de nuestra web.

Vemos que, debido a que el IFRAME no tiene un alto fijo, aparece su propio SCROLL.

Pero no podemos utilizar CSS para ocultar ese SCROLL ya que, si lo hacemos, desactivamos la posibilidad de subir y bajar el contenido de nuestro IFRAME.

 

 

 

Vamos con la Solución.

Lo voy a llamar el ‘Método PASPARTÚ’.

Supongo que sabes qué es un paspartú. Es el típico marco interior que se les pone a las fotos o pinturas y que tiene un tamaño inferior a la imagen. Suele usarse con objetivos decorativos pero a veces, si la imagen tiene los bordes dañados o queremos centrar la atención eliminando parte del fondo de la imagen su uso es muy práctico.

En esta imagen te puedes hacer una idea de cómo funciona este método.

El borde negro es nuestra web completa.

El borde blanco es el DIV que ha de contener nuestro IFRAME impidiendo que se muestre el SCROLL pero permitiendo navegar por su interior.

Y el código, claro está es  nuestro contenido, el IFRAME,

Vamos a montarlo todo.

Empezamos creando, en nuestro archivo HTML, los DIV que formarán parte del objeto:

<div class="paspartu">
    <div class="iframe">
        Aqui pondremos el código de nuestro IFRAME
    </div> 
</div>

Hemos creado el DIV ‘paspartu’, que será el que contenga el DIV ‘iframe’.

Ahora, vamos a darle sus clases CSS a los dos contenedores utilizando la función calc() de CSS3 que nos permite calcular tamaños mezclando unidades.

Empezamos por el DIV contenedor, el ‘paspartú’:

.paspartu {
    position: relative;
    float: left;
    height: 100%
    width: 100%;
    overflow: hidden;
}

Y ahora, el DIV que contiene nuestro IFRAME.

.iframe {
    position: relative;
    float: left;    
    height: 100%;
    width: calc(100% + 20px);
    overflow-y: auto;
}

Verás que el ancho (WIDTH) del contenedor del IFRAME es el resultado de calcular 100% + 20px.

20px es lo que mide de ancho la barra del SCROLL, por lo que queda oculto (y totalmente funcional) bajo el contenedor PASPARTÚ.

Y con ésto ya lo tenemos solucionado.  Vuelvo a decir que hay maneras más correctas usando Javascript y con otros códigos pero, para salir del paso, éste método nos puede ayudar bastante.

Seguiré añadiendo truquillos y utilidades para usar en nuestras webs.

Nunca te quedes bloqueado, siempre hay una solución .

Espero que os sirva, Hasta pronto!!