2008-09-15 20 views
19

Tengo un iframe. El contenido es más ancho que el ancho que estoy configurando, por lo que el iframe obtiene una barra de desplazamiento horizontal. No puedo aumentar el ancho del iframe, así que solo quiero quitar la barra de desplazamiento. Traté de configurar la propiedad de desplazamiento en "no", pero eso mata ambas barras de desplazamiento y quiero la vertical. Intenté configurar overflow-x en "hidden" y eso mató a la barra de desplazamiento horizontal en ff pero no en IE. triste por mi¿La barra de desplazamiento horizontal del iframe temido no se puede eliminar en IE?

Respuesta

43
scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" 

Ponlo en tu etiqueta de iFrame.

No es necesario perder el tiempo en tratar de dar formato a esto en el CSS.

+1

zOMG. Si bien los atributos horizontalscrolling y verticalscrolling aparecen totalmente indocumentados en MSDN, esto funcionó para resolver mi problema IE 6. –

+1

Gran solución, exactamente lo que estaba buscando, tyvm. – David

+0

Tener un problema en IE10 (sí, de nuestros clientes aún lo usan) donde mostramos algunos anuncios HTML5 personalizados dentro de iframe. Hacer este truco no funcionó para nosotros ... – lkartono

5

usted podría intentar poner el marco flotante dentro de un div y luego usar el div para el desplazamiento. Puede controlar el desplazamiento en el div en IE sin problemas, IE solo tiene problemas con el desplazamiento del iframe. Aquí hay un ejemplo rápido que debería hacer el truco.

<html> 
    <head> 
     <title>iframe test</title> 

     <style>   
     #aTest { 
      width: 120px; 
      height: 50px; 
      padding: 0; 
      border: inset 1px #000; 
      overflow: auto; 
     } 

     #aTest iframe { 
      width: 100px; 
      height: 1000px; 
      border: none; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="aTest"> 
      <iframe src="whatever.html" scrolling="no" frameborder="0"></iframe> 
     </div> 
    </body> 
</html> 
+0

Gracias por esta solución. El único problema es que debe definir una altura fija para el contenido del iframe, que en mi caso variará. Voy a usar esto y tendré que especificar una altura extra grande para el iframe que es un poco hacky. Pero muchas gracias, esto me llevó allí. – mrjrdnthms

24

La barra de desplazamiento no es una propiedad de la , es una propiedad de la página que contiene. Intente poner overflow-x: hidden en el elemento <html> de la página interior.

+1

trabajó con el elemento del cuerpo. ¡Gracias! –

+2

esta solución es mucho mejor para mantener el código iframe ligero y favorece la encapsulación. no debería tener que recordar agregar y recordar la sintaxis. –

+3

Estoy de acuerdo con @DannyG. Hemos pasado la era de los atributos de presentación en nuestro marcado. Las soluciones de CSS puro son preferibles por una serie de razones. – DuxPrime

0
<iframe style="overflow:hidden;" src="about:blank"/> 

debería funcionar en IE. IE6 tenía problemas para soportar overflow-x y overflow-y.

otra cosa a tener en cuenta es que la frontera de IE en el marco flotante sólo se puede eliminar si se establece el atributo "frameborder" en camelCase.

<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/> 

sería bueno si pudiera estilizarlo correctamente con CSS, pero no funciona en IE.

+0

En mi caso quiero quitar la barra de desplazamiento x, pero no se yy creo establecer el desbordamiento oculta eliminará ambos. ¿Tengo eso correcto? – mrjrdnthms

0

Todas estas soluciones no funcionó para mí o no fueron satisfactorios. Con el DIV desplazable, puede hacer que la barra de desplazamiento horizontal desaparezca, pero siempre tendrá la vertical.

Por lo tanto, para mi sitio en el que puedo estar seguro de controlar la altura fija de todos los marcos flotantes, este siguiente solución funciona muy bien. Simplemente oculta la barra de desplazamiento horizontal con un DIV :)

<!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes --> 
<!--[if IE]> 
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;"> 
</div> 
<![endif]--> 
<script type="text/javascript"> 
    if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null) 
    { 
    document.getElementById("ieIframeHorScrollbarHider").style.display = "block"; 
    } 
</script> 
0

También puede intentar establecer el ancho del cuerpo de la página que se incluye dentro del marco flotante al 99%.

Cuestiones relacionadas