Safari/Chrome (Webkit) - Ne peut pas se cacher iframe barre de défilement verticale

J'ai un iframe sur www.example.com que les points de support.example.com (qui est un CNAME sur un domaine étranger).

Je redimensionner automatiquement la hauteur de mon iframe afin que le cadre n'aurez pas besoin de barres de défilement pour afficher le contenu de la page web.

Sur Firefox et IE cela fonctionne très bien, il n'y a pas de barre de défilement depuis que j'utilise <iframe ... scrolling="no"></iframe>. Cependant, sur les navigateurs webkit (Safari et Chrome), la barre de défilement verticale persiste même quand il y a suffisamment d'espace pour la page sans la barre de défilement (la barre de défilement est grisé).

Comment puis-je masquer la barre de défilement pour les navigateurs webkit?

  • Note pour la postérité: c'était un bug dans les navigateurs webkit qui a depuis été corrigé. Voici le rapport de bug: bugs.webkit.org/show_bug.cgi?id=29240
  • pourquoi n'avez-vous pas accepter tout!?
InformationsquelleAutor BrainCore | 2009-11-07
  1. 62

    Je viens de tomber sur ce problème, et a découvert que le correctif a été mis overflow: hidden sur la balise HTML de la page à l'intérieur de la iframe.

    • Merci pour cette astuce, Tim; il fixe le problème pour moi. Par ailleurs, il semble que le style de l'élément HTML à débordement:caché à l'intérieur d'une balise style ne fonctionne pas -- vous besoin de le mettre dans un attribut style de la balise HTML (même si ça n'est pas valide). Alors... C': <html style="overflow: hidden;"> <head></head> <body>truc</body> </html> Pas ceci: <html> <head><style type="text/css"> html { overflow:hidden; } </style></head> <body>truc</body> </html>
    • Dans Chrome/10.0.648.133 il semble fonctionner si le overflow:hidden est dans le <html> étiquette, dans un style en ligne, ou même dans une feuille de style externe — bien que Chrome semble être un peu trop agressif sur la mise en cache des feuilles de style externes. Peut-être que ce bug a été corrigé, parfois, au fil des ans.
    • HTML styles en ligne? J'ai tout vu, maintenant...
    • Fait-il une différence si j'ajoute overflow:hidden; à la body tag au lieu de html?
    InformationsquelleAutor Tim
  2. 53

    Vous pouvez masquer les barres de défilement et de maintenir la fonctionnalité de défilement (par le clavier ou la molette de défilement, ou touchez et faites glisser dans un téléphone mobile ou une tablette, à l'aide de:

    <style>
  iframe::-webkit-scrollbar {  
    display: none;
  }  
</style>

    Évidemment, vous pouvez modifier l'iframe de ce qui répond à votre design, et vous pouvez ajouter l'équivalent -mozilla - propriété pour obtenir un travail dans firefox et.

    • Génial, ce devrait être la accepté de répondre.
    • C'est la réponse. webkit.org/blog/363/styling-scrollbars
    • N'est-il pas un modérateur qui peut faire ce la bonne réponse?
    • c'est à l'utilisateur qui a ouvert la question de choisir une bonne réponse.
    • Merci @palako. Juste une remarque, si vous voulez maintenir le défilement verticale visible, il suffit d'utiliser: iframe::-webkit-scrollbar horizontal {display: none;} afin de ne masquer l'horizontale.
    • Vous pouvez marquer une mauvaise réponse, "non pas comme une réponse" - parce qu'il ne l'est pas.
    • Cette CSS semble ne pas fonctionner dans le nouveau google Chrome, vous devez le faire dans l'iframe lui-même.
    • il ne fonctionne pas pour moi aussi. Chrome 71 sur mac.

    InformationsquelleAutor palako
  3. 16
    Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.

    C'est un peu un hack, mais j'ai résolu ce problème en enveloppant la <iframe> dans un <div>, réglage de la <div>hauteur, largeur & overflow:hidden, puis en définissant la <iframe>'s largeur & hauteur de fait déborder l'emballage <div>.

    <style>
  div {height:100px;width:100px;overflow:hidden}
  iframe {height:150px;width:150px;overflow:hidden}
</style>

<div>
  <iframe src="foo.html" scrolling="no"></iframe>
</div>

    Espère que cette aide.

    • C'est une force brute approche qui devrait fonctionner comme une solution de contournement à des fonctionnalités manquantes ou de bugs 🙂
    • juste en ajoutant overflow:hidden pour l'iframe style a été suffisant pour obtenir le défilement de travail pour moi dans Safari, chrome et IE
    InformationsquelleAutor Labu
  4. 11

    Je suis en supposant que vous avez essayé cela, mais avez-vous mis défilement à pas sur l'iframe?

    <iframe scrolling="no">
    • yup. Je n'ai pas à échapper à son drapeau dans mon post, malheureusement, elle ne s'affiche pas.
    InformationsquelleAutor Shpigford
  5. 6

    Pour se débarrasser de la grisé barres de défilement, de mettre "overflow: hidden;" sur la balise body de la page affichée dans l'Iframe par exemple <body style="overflow:hidden;"> Cela a bien fonctionné pour moi dans Chrome 8.0.552.215 et j'ai aussi eu "overflow: hidden" sur l'Iframe lui-même

    InformationsquelleAutor Simon Jackson
  6. 3

    Cela vous aide? Fonctionne sur Chrome, IE, FF...

    <style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>

<body scroll="no">
<div id="test">content</div>
</body>
    InformationsquelleAutor tpeck
  7. 2

    Pouvez-vous définir le overflow-y propriété CSS pour l'IFRAME soit visible ou hidden?

    • Réglage de l'overflow-y une propriété css cachés directement pour l'IFRAME, ou pour le html/balises de corps de la page web semble avoir aucun effet. Pourrais-je être substitution de cette propriété en quelque sorte?
    • -1 overflow-y n'est pas un standard de la propriété CSS; c'est IE seul.
    • Merci de me laisser savoir Josh!
    • Assez sûr overflow-y et overflow-x sont corrects CSS3...
    InformationsquelleAutor JasonWyatt
  8. 2

    vérifier si le défilement est vraiment de l'iframe, c'est peut-être du HTML ou du CORPS.

    Pour faire défiler dans un iframe 

    <iframe scrolling="no">

    En css

    iframe { overflow:hidden; }

or 

iframe { overflow-x:hidden; overflow-y:hidden}
    InformationsquelleAutor Razielblood
  9. 2

    Je viens de résoudre sur mon blog avec scrolling="no" après le style de la balise.

    par exemple:

    iframe src="asdf.html" style="overflow: hidden;" scrolling="no"

    J'ai quitté l'attribut style dans là parce que c'est plus bon et il a bien fonctionné sur Firefox.

    InformationsquelleAutor Giles Bowkett
  10. 2

    À l'aide de Chrome 8.0.552.224 bêta sous Ubuntu 10.10 montre encore le fantôme de barres de défilement sur ce site: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling. J'ai essayé toutes les astuces de ce qui fonctionne dans tous les navigateurs, mais pas dans le navigateur basé sur WebKit. Donc le bug ne semble pas être fixé complètement.

    InformationsquelleAutor harald
  11. 2
    document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

    cela fonctionne, aucun des autres semblaient travail, y compris la e.preventDefault() pour les évènements touchstart.

    InformationsquelleAutor foopanda
  12. 1

    Essayez ceci...

    iframe { overflow:hidden; }
    • Essayé depuis le début. Pas de travail. Merci bien.
    InformationsquelleAutor Josh Stodola
  13. 1

    ne pas utiliser le défilement de la balise à tous sur l'iframe et ajouter le style
    style="overflow-x:hidden;overflow-y:auto;"
    cela permettra de supprimer la barre de défilement horizontale et cela devrait fonctionner aussi dans l'autre sens.

    -Jai

    InformationsquelleAutor Jai
  14. 1

    Réglage de l'iframe du défilement de l'attribut "no" devrait résoudre ce problème, mais il semble y avoir un bug dans webkit: https://bugs.webkit.org/show_bug.cgi?id=29240

    Tim du travail ( Safari/Chrome (Webkit) - Ne peut pas se cacher iframe barre de défilement verticale ) semble résoudre le problème -- tant que vous avez la possibilité de modifier le document contenait par l'iframe...

    InformationsquelleAutor Rudi
  15. 1

    cacher iframe scrolling dans google chrome, mettre le corps de la balise comme ceci

    <body style="margin:0px; padding:0px; overflow:hidden;"></body>
    InformationsquelleAutor Vaidehi
  16. 0
    <iframe> <body style="overflow-x: hidden"> </body> </iframe>
    InformationsquelleAutor Teoman shipahi
  17. 0

    1.lorsque vous modifiez l'iframe scrolling oui ou non, l'iframe de la barre de défilement ne marche pas apparaître immédiatement, vous devez actualiser la iframe.

    2.le code html du robinet trop-plein dans l'iframe colud influence de l'iframe de la barre de défilement

    3.dans internet explorer,vous devez les effacer de l'iframe src,puis sur actualiser iframe ,il aura du travail

    4.donc, à vous montrer le code

    html

    <iframe id="main_ifrm" class="main"  frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>

    javascript

    var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
    $(ifrm).prop("scrolling","no");
    $(ifrm.contentWindow.document).find("html").css("overflow","hidden")
    var src = $(ifrm).prop("src");
    $(ifrm).prop("src","");
    $(ifrm).prop("src",src);
}
    InformationsquelleAutor kuminson