¿Oculta la barra de desplazamiento horizontal en un iframe?

Question

Necesito ocultar la barra de desplazamiento horizontal en un iframe utilizando css, jquery o js.

Answer 1

yo sugiero hacer esto con una combinación de

1. CSS overflow-y: hidden;
2. scrolling="no" (para HTML 4)
3. y seamless="seamless" (para HTML5) *

^{* El atributo seamless tiene been removed del estándar y no browsers lo soportan.}

---

.foo { 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow-y: hidden; 
 
}

<iframe src="https://bing.com" 
 
     class="foo" 
 
     scrolling="no" > 
 
</iframe>

Answer 2

conjunto scrolling="no" atributo en el marco flotante.

Answer 3

Esta respuesta solo se aplica a los sitios web que usan Bootstrap. La función de inserción receptiva de Bootstrap se ocupa de las barras de desplazamiento.

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe> 
</div> 

jsFiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Answer 4

Si se le permite cambiar el código del documento dentro de su iframe y que el contenido sea visible sólo utilizando su ventana padre, sólo tiene que añadir el siguiente CSS en su iframe:

body { 
    overflow:hidden; 
} 

Aquí un ejemplo muy sencillo:

http://jsfiddle.net/u5gLoav9/

Esta solución le permitirá:

• Mantenerlo HTML5 válido, ya que no necesita scrolling="no" atributo en el iframe (este atributo en HTML5 ya no se utiliza).

• Funciona en la mayoría de los navegadores usando CSS overflow:hidden

• Sin JS o jQuery es necesario.

Notas:

para no permitir barras de desplazamiento horizontal, utilizar este CSS lugar:

overflow-x: hidden;