¿Ocultar la barra de desplazamiento horizontal en un iframe?

110

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

— nkcmr
fuente

1

posible duplicado: Safari / Chrome (Webkit) - No se puede ocultar la barra de desplazamiento vertical de iframe y otros

— Matt Ball

iframe no está en el mismo dominio que la página principal.

— nkcmr

overflow-y: oculto; No funciona en Google Chrome, Safari y Opera. Pruébelo con jsfiddle.net/m5Btd/3

— phangia2712

208

Sugeriría hacer esto con una combinación de

CSS overflow-y: hidden;
scrolling="no" (para HTML4)
~~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