web-dev-qa-db-fra.com

Safari/Chrome (Webkit) - Impossible de masquer la barre de défilement verticale iframe

J'ai une iframe sur www.example.com qui pointe sur support.example.com (qui est un CNAME vers un domaine étranger).

Je redimensionne automatiquement la hauteur de mon iframe afin que le cadre ne nécessite aucune barre de défilement pour afficher la page Web contenue.

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

Comment masquer la barre de défilement pour les navigateurs Webkit?

cssiframesafariwebkitscrollbar
48
BrainCore

Je viens de rencontrer ce problème et de découvrir que le correctif consistait à définir overflow: hidden sur la balise HTML de la page à l'intérieur de iframe.

61
Tim

Vous pouvez masquer les barres de défilement et conserver la fonctionnalité de défilement (à l'aide du pavé tactile ou de la molette de défilement, ou toucher et faire glisser un téléphone portable ou une tablette en utilisant:

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

De toute évidence, vous pouvez modifier iframe en fonction de votre conception, et vous pouvez également ajouter la propriété -mozilla- équivalente pour que cela fonctionne également dans Firefox.

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

C'est un peu un bidouillage, mais j'ai résolu ce problème en encapsulant le <iframe> dans un <div>, en définissant la hauteur, la largeur et le <div> du overflow:hidden, puis en définissant la largeur et la hauteur du <iframe> pour qu'il déborde réellement du <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>

J'espère que cela t'aides.

16
Labu

Je suppose que vous avez essayé cela, mais avez-vous défini le défilement sur non sur l'iframe?

<iframe scrolling="no">
11
Shpigford

Pour vous débarrasser des barres de défilement grisées, placez "débordement: caché;" sur la balise body de la page affichée dans l’Iframe, par ex. <body style="overflow:hidden;"> Cela fonctionnait bien pour moi dans Chrome 8.0.552.215 et j'avais également un "débordement: caché" sur l'Iframe lui-même.

6
Simon Jackson

Est-ce que cela 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>
3
tpeck

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

par exemple:

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

J'ai laissé l'attribut style ici parce que c'est plus approprié et que ça a bien fonctionné sous Firefox.

2
Giles Bowkett

vérifiez si le parchemin provient réellement de l'iframe, peut-être du code HTML ou du corps.

Pour faire défiler dans iframe 

<iframe scrolling="no">

En css

iframe { overflow:hidden; }

or 

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

Pouvez-vous définir la propriété CSS overflow-y pour IFRAME sur visible ou hidden?

2
JasonWyatt

Utiliser Chrome 8.0.552.224 beta sous Ubuntu 10.10 affiche toujours les barres de défilement fantômes sur ce site: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling . J'ai essayé tous les trucs qui fonctionnent dans tous les navigateurs, mais pas dans les navigateurs WebKit. Par conséquent, le bogue semble ne pas être complètement corrigé.

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

cela fonctionne, aucun des autres ne semble fonctionner, y compris la e.preventDefault() pour touchstart.

2
foopanda

n'utilisez pas de balise de défilement du tout sur l'iframe et ajoutez le style de la manière suivante: chemin aussi.

-I have

1
Jai

cacher iframe scrolling in chrome mettre la balise body comme ceci

<body style="margin:0px; padding:0px; overflow:hidden;"></body>
1
Vaidehi

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

La solution de Tim ( Safari/Chrome (Webkit) - Impossible de masquer la barre de défilement verticale iframe ) semble résoudre le problème - tant que vous avez la possibilité de modifier le document contenu par l'iframe .. .

1
Rudi

Essaye ça...

iframe { overflow:hidden; }
1
Josh Stodola
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
0
Teoman shipahi

1.Quand vous modifiez le défilement de l'iframe par oui ou par non, la barre de défilement de l'iframe ne s'affiche pas immédiatement, vous devez l'actualiser.

Le débordement du robinet html dans iframe colud influence la barre de défilement de l'iframe 

3.dans l'IE, vous devez effacer la src d'iframe, puis rafraîchir l'iframe, ce sera un travail

4.so 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);
}
0
kuminson