2008-09-15 6 views
19

J'ai un iframe. Le contenu est plus large que la largeur que je définis, donc l'iframe obtient une barre de défilement horizontale. Je ne peux pas augmenter la largeur de l'iframe, donc je veux juste enlever la barre de défilement. J'ai essayé de placer la propriété de défilement à "non" mais cela tue les deux barres de défilement et je veux le vertical. J'ai essayé de placer overflow-x à "caché" et cela a tué la barre de défilement horizontale dans ff mais pas dans IE. triste pour moi.La barre de défilement horizontale iframe redoutée ne peut pas être supprimée dans IE?

Répondre

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

Mettez cela dans votre tag iFrame.

Vous n'avez pas besoin de jouer avec le formatage en CSS.

+1

zOMG. Alors que les attributs horizontalscrolling et verticalscrolling apparaissent totalement non documentés sur MSDN, cela a fonctionné pour résoudre mon problème IE 6. –

+1

Grande solution, exactement ce que je cherchais, tyvm. – David

+0

Avoir un problème sur IE10 (oui de nos clients l'utilisent encore) où nous affichons des publicités HTML5 personnalisées dans iframe. Faire ce tour n'a pas fonctionné pour nous ... – lkartono

5

Vous pouvez essayer de placer l'iframe dans un div puis utiliser le div pour le défilement. Vous pouvez contrôler le défilement sur le div dans IE sans problèmes, IE seulement a vraiment des problèmes avec le défilement iframe. Voici un exemple rapide qui devrait faire l'affaire.

<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

Nous vous remercions pour cette solution. Le seul problème est que vous devez définir une hauteur fixe pour le contenu iframe, qui variera dans mon cas. Je vais l'utiliser et devra spécifier une taille extra large pour l'iframe qui est un peu hacky. Mais merci beaucoup cela m'a amené là-bas. – mrjrdnthms

24

La barre de défilement n'est pas une propriété de la , il est une propriété de la page qu'il contient. Essayez de mettre overflow-x: hidden sur l'élément <html> de la page intérieure.

+1

travaillé avec l'élément de corps. Merci! –

+2

cette solution est tellement mieux que de garder le code iframe léger et favorise l'encapsulation. Je ne devrais pas avoir à penser à ajouter et à mémoriser la syntaxe. –

+3

Je suis d'accord avec @DannyG. Nous avons dépassé l'ère des attributs de présentation dans notre balisage. Les solutions CSS pures sont préférables pour un certain nombre de raisons. – DuxPrime

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

devrait fonctionner dans IE. IE6 avait des problèmes supportant overflow-x et overflow-y.

Une autre chose à noter est que la bordure d'IE sur iframe ne peut être supprimée que si vous définissez l'attribut "frameborder" dans camelCase.

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

ce serait bien si vous pouviez le style correctement avec CSS, mais cela ne fonctionne pas dans IE.

+0

Dans mon cas, je veux supprimer la barre de défilement x mais pas lui et je crois que la configuration du débordement caché va supprimer les deux. Est-ce que j'ai cela correct? – mrjrdnthms

0

Toutes ces solutions n'ont pas fonctionné pour moi ou n'ont pas été satisfaisantes. Avec le DIV scrollable, vous pouvez faire disparaître la barre de défilement horizontale, mais vous aurez toujours la verticale. Donc, pour mon site où je peux être sûr de contrôler la hauteur fixe de toutes les iframes, cette solution suivante fonctionne très bien. Il se cache tout simplement la barre de défilement horizontal avec 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

Vous pouvez également essayer de régler la largeur du corps de la page qui est inclus dans le iframe à 99%.

Questions connexes