Pregunta sobre iframe, html, css – Eliminar barra de desplazamiento de iframe

87

Usando este codigo

<code><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>
</code>

Así es como aparece (el shoutbox en la página de inicio dehttp://www.talkjesus.com)

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

Gracias.

duplicar constackoverflow.com/questions/4856746/… cual tiene una mejor respuesta Daniël Tulp

Tu respuesta

10   la respuesta
231

scrolling="no" atribuir al iframe.

El atributo de desplazamiento en el iframe ahora está oficialmente obsoleto. CSS debe utilizarse en su lugar. Mike Poole
Solo esto funciono para mi, en Opera solo esto funciona ... Hydroper
Sí, pero luego en Chrome no se puede usar scrollIntoView. Vercode.google.com/p/chromium/issues/detail?id=137214 Peter Brand
@MikePoole Puede ser oficialmente obsoleto, pero no ayudó a configuraroverflow:hidden;en Chrome 65.0.3325.181, peroscrolling="no" ayudado. some
7

Agrega esto en tu css para ocultar ambas barras de desplazamiento

<code>iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
</code>
8
<code><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>;
</code>

ingún navegador.

seamless atributo no es HTML5 válido, no es compatible con la mayoría de los navegadores (caniuse.com/#search=seamless), y la mayor parte del otro estilo es innecesario. Pere
2

puede usar el::-webkit-scrollbar pseudo-elemento en eliframeDe los padres para deshacerse de esas famosas barras de desplazamiento de los años 90.

<code>::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
</code>

Editar: aunque esrelativamente apoyado, ::-webkit-scrollbar Es posible que no se adapte a todos los navegadores. utilizar con precaución :)

Esta es la única respuesta que me ayudó. Todavía puedes desplazarte pero no ves la fea barra de desplazamiento. ¡Gracias! Karmidzhanov
12

scroll="no" ystyle="overflow:hidden" en iframe no funcionó, tuve que agregarstyle="overflow:hidden" En el cuerpo del documento html cargado dentro de iframe.

Si esto ayuda, hay un problema en Firefox, donde si tienes un elemento CSStransform: scale(0.7) o tal, esto creará barras de desplazamiento (que se mostrarán en su iFrame), a menos que lo recorte conoverflow: hidden; en un antepasado (podría ser un div en lugar de un cuerpo). WraithKenny
¿Quieres decir cargado dentro de nuestro cargado alrededor? ¿Qué hay alrededor de qué? João Pimentel Ferreira
Eso es porque es 'scrolling = no', no 'scroll = no'. Bryan Green
¡¡¡¡¡Gran ayuda!!!!! Mike Keskinov
cargado dentro de <iframe src = "/ test.html"> donde test.html tiene esta configuración. nirvana74v
3

izontal

<code>iframe{
    overflow-x:hidden;
}
</code>
16

en tu css:

<code>iframe{
    overflow:hidden;
}
</code>
No funciona... Andrew
no funciona:jsfiddle.net/greggman/98ttg9vz gman
Esto no funciona, ya que esto no afectará el contenido del iframe, solo el propio iframe. La solución es scrolling = "no". Lars Van de Donk
@LarsVandeDonk Su respuesta debe ser la solución correcta. Wong Jia Hau
4

e desplazamiento en laiframe, podría ser porque el contenido del iframe tiene barras de desplazamiento en los elementosabajo lahtml ¡elemento!

Algunos diseños establecidoshtml ybody a 100% de altura, y usar una#wrapper div conoverflow: auto; (oscroll), moviendo así el desplazamiento a la#wrapper elemento.

En tal caso, nada de lo que haga evitará que aparezcan las barras de desplazamiento, excepto la edición del contenido de la otra página.

23

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

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

Solo agregascrolling="no" yseamless="seamless" atributos a la etiqueta iframe. Me gusta esto:-

<code> 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
</code>
Debes usar css en lugar de un atributo continuo. Nima Rahbar
@NimaRahbar El atributo sin costura puede estar obsoleto, pero css no admite parámetros de iframe. Abandoned Cart
El atributo sin costura ha sidoeliminado de HTML. neopickaze

Preguntas relacionadas