Eliminar la barra de desplazamiento del iframe

117

Usando este código

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Así es como aparece (el cuadro de diálogo en la página de inicio de http://www.talkjesus.com )

¿Cómo elimino la barra de desplazamiento horizontal y modifico el CSS de la barra de desplazamiento vertical?

html css iframe

— Fe en cosas invisibles
fuente

2

duplicar con stackoverflow.com/questions/4856746/… que tiene una mejor respuesta

— Daniël Tulp

9

en tu css:

iframe{
    overflow:hidden;
}

— takien
fuente

7

Gracias, pero solo el desplazamiento horizontal y todavía aparece en Firefox. No aparece en Chrome ni en IE. Además, CSS para la barra de desplazamiento se aplica de manera efectiva solo en IE, no en FF ni en Chrome (este último muestra el color / tonos beige de aspecto predeterminado).

— Fe en cosas invisibles

3

Esto no funcionará porque el desbordamiento ocurre en el documento iframe, que generalmente no podrá modificar debido a restricciones de seguridad de iframe entre dominios.

— thdoan

54

Esto no funciona ya que no afectará el contenido del iframe, solo el iframe en sí. La solución es scrolling = "no".

— TheLD

4

Esta es una respuesta incorrecta, no elimina las barras de desplazamiento en Google Chrome, pero scrolling = "no" sí.

— Anders Lindén

@LarsVandeDonk Tu respuesta debería ser la solución correcta.

— Wong Jia Hau

313

Agregue un scrolling="no"atributo al iframe.

— PROSPERAR
fuente

1

capaz de hacer esto con css?

— Evorlor

1

Sí, pero luego en Chrome no se puede usar scrollIntoView. Ver code.google.com/p/chromium/issues/detail?id=137214

— Peter Brand

1

bueno, esto oculta la barra de desplazamiento del contenido y evita el desplazamiento del contenido. no evita que aparezca la barra de desplazamiento del iframe.

— Dave Cousineau

3

El atributo de desplazamiento en el iframe ahora está oficialmente obsoleto. En su lugar, debería utilizarse CSS.

— Mike Poole

4

@MikePoole Puede que esté oficialmente obsoleto, pero no ayudó a configurar overflow:hidden;Chrome 65.0.3325.181, pero scrolling="no"ayudó.

— un

28

Esto funciona en todos los navegadores. jsfiddle aquí http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

— Thyagarajan C
fuente

21

Agregar scroll="no"y style="overflow:hidden"en iframe no funcionó, tuve que agregar style="overflow:hidden"el cuerpo del documento html cargado dentro del iframe.

— nirvana74v
fuente

1

Si esto ayuda, hay un problema en Firefox, donde si tiene un elemento CSS transform: scale(0.7)o similar, esto creará barras de desplazamiento (que aparecerán en su iFrame), a menos que lo recorte con overflow: hidden;un antepasado (podría ser un div en lugar de cuerpo).

— WraithKenny

8

Eso es porque es 'scrolling = no', no 'scroll = no'.

— Bryan Green

¿Te refieres a cargado dentro de nuestro cargado alrededor? ¿Qué hay alrededor de qué?

— João Pimentel Ferreira

cargado dentro de <iframe src = "/ test.html"> donde test.html tiene esta configuración.

— nirvana74v

16

Intente agregar un scrolling="no"atributo como el siguiente:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Expandir fragmento

— Allabux B
fuente

11

Simplemente agregue scrolling="no"y seamless="seamless"atributos a la etiqueta iframe. Me gusta esto:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

— Nima Rahbar
fuente

13

El atributo seamless se ha eliminado de HTML .

— neopickaze

Debe utilizar css en lugar de un atributo integrado.

— Nima Rahbar

@NimaRahbar El atributo seamless puede estar obsoleto, pero css no admite parámetros de iframe.

— Carrito abandonado

9

Si alguien aquí tiene un problema para deshabilitar las barras de desplazamiento en el iframe, ¡podría ser porque el contenido del iframe tiene barras de desplazamiento en los elementos debajo del htmlelemento!

Algunos diseños establecen htmly bodyal 100% de altura, y usan un #wrapperdiv con overflow: auto;(o scroll), moviendo así el desplazamiento al #wrapperelemento.

En tal caso, nada de lo que haga evitará que aparezcan las barras de desplazamiento, excepto editar el contenido de la otra página.

— WraithKenny
fuente

8

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Utilice el div anterior y no mostrará la barra de desplazamiento en ningún navegador.

— Caballero Furia
fuente

3

seamlessEl atributo no es HTML5 válido, no es compatible con la mayoría de los navegadores ( caniuse.com/#search=seamless ) y la mayoría de los demás estilos son innecesarios.

— Pere

8

Agregue esto en su css para ocultar ambas barras de desplazamiento

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

— Deepika Patel
fuente

6

Este es un último recurso, pero vale la pena mencionarlo: puede usar el ::-webkit-scrollbarpseudoelemento en el elemento iframeprimario de para deshacerse de esas famosas barras de desplazamiento de los 90.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Editar: aunque es relativamente compatible , es ::-webkit-scrollbarposible que no se adapte a todos los navegadores. usar con precaución :)

— DotBot
fuente

2

Esta es la única respuesta que me ayudó. Todavía puede desplazarse, pero no ve la barra de desplazamiento fea. ¡Gracias!

— Karmidzhanov

4

Agregue esto en su css para ocultar solo la barra de desplazamiento horizontal

iframe{
    overflow-x:hidden;
}

— Abhidev
fuente

3

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

De esta manera, hace que el ancho del Iframe sea más grande de lo que debería ser. Luego oculta la barra de desplazamiento horizontal con overflow-x: hidden.

— Nico Grill
fuente