¿Ocultar la barra de desplazamiento horizontal en un iframe?

Respuestas:

208

Sugeriría hacer esto con una combinación de

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

* El seamlessatributo se ha eliminado del estándar y ningún navegador lo admite.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
Expandir fragmento

Chase Florell
fuente
9
Cargué su ejemplo en Chrome 15 y todavía veo las barras de desplazamiento.
Dan
61
Agregar el scrolling="no"atributo al iframe parece eliminar las barras de desplazamiento en Chrome.
Nick
2
@Nick No lo elimina en Chrome al menos en mi computadora. img339.imageshack.us/img339/6685/chromelj.png
l46kok
1
@ l46kok su captura de pantalla no incluyescrolling="no"
Chase Florell
3
Tenga en cuenta que ninguno de los principales navegadores admite actualmente el atributo sin apariencia . caniuse.com/#feat=iframe-seamless
Liyali
26

establecer scrolling="no"atributo en su iframe.

Rahul Dadhich
fuente
15

Si se le permite cambiar el código del documento dentro de su iframey ese contenido es visible solo usando su ventana principal, simplemente agregue el siguiente CSS en su iframe:

body {
    overflow:hidden;
}

Aquí un ejemplo muy simple:

http://jsfiddle.net/u5gLoav9/

Esta solución le permite:

  • Mantén tu HTML5 válido ya que no necesita scrolling="no"atributos en el iframe(este atributo en HTML5 ha quedado obsoleto).

  • Funciona en la mayoría de los navegadores que usan desbordamiento de CSS : oculto

  • No es necesario JS o jQuery.

Notas:

Para no permitir las barras de desplazamiento horizontalmente, use este CSS en su lugar:

overflow-x: hidden;
GibboK
fuente
2

Esta respuesta solo es aplicable para sitios web que usan Bootstrap. La función de inserción receptiva de Bootstrap se encarga 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

Razan Paul
fuente