Safari / Chrome (Webkit) - ne peut pas cacher iframe vertical scrollbar
j'ai un iframe sur www.example.com ce qui indique support.example.com (qui est un CNAME vers un domaine étranger).
je redimensionne automatiquement la hauteur de mon iframe de sorte que le cadre n'aura pas besoin de barres de défilement pour afficher la page Web contenue.
sur Firefox et IE cela fonctionne très bien, il n'y a pas de scrollbar depuis que j'utilise <iframe ... scrolling="no"></iframe> . Cependant, sur les navigateurs webkit (Safari et Chrome), le scrollbar vertical persiste même lorsqu'il disposer d'un espace suffisant pour la page sans la barre de défilement (scrollbar est grisé).
Comment puis-je cacher la barre de défilement pour les navigateurs webkit?
17 réponses
je viens de rencontrer ce problème, et j'ai découvert que le correctif était de mettre overflow: hidden sur la balise HTML de la page à l'intérieur du iframe .
vous pouvez masquer les barres de défilement et maintenir la fonctionnalité de défilement (par touchpad ou scroll wheel, ou touch and drag dans un téléphone mobile ou une tablette, en utilisant:
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
évidemment, vous pouvez changer iframe à tout ce qui correspond à votre conception, et vous pouvez ajouter la propriété-mozilla - équivalente pour obtenir le travail dans firefox aussi bien.
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
c'est un peu un piratage, mais j'ai résolu ce problème en enveloppant le <iframe> dans un <div> , en réglant le <div> 'S Hauteur, Largeur & overflow:hidden , puis en réglant le" 151920920 'S Largeur & height pour réellement 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érons que cette aide.
je suppose que vous avez essayé, mais avez-vous mis le défilement à non sur l'iframe?
<iframe scrolling="no">
pour se débarrasser des barres de défilement grisées, mettez "débordement: caché;" sur la balise de corps de la page étant affiché dans L'Iframe par exemple <body style="overflow:hidden;"> cela a bien fonctionné pour moi dans Chrome 8.0.552.215 et j'ai également eu "débordement: caché" sur l'Iframe elle-même
est-ce que ça 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>
pouvez-vous définir la propriété CSS overflow-y pour L'IFRAME à visible ou hidden ?
vérifiez si le rouleau est réel à partir de l'iframe, peut-être qu'il vient du HTML ou du corps.
Pour faire défiler dans un iframe
<iframe scrolling="no">
dans css
iframe { overflow:hidden; }
or
iframe { overflow-x:hidden; overflow-y:hidden}
je viens de le résoudre sur mon blog avec scrolling=" no " après l'étiquette de style.
par exemple:
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
j'ai laissé l'attribut style là-dedans parce que c'est plus approprié et ça a bien fonctionné sur Firefox.
utilisant Chrome 8.0.552.224 bêta sous Ubuntu 10.10 montre 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 ce qui fonctionne dans tous les navigateurs, mais pas dans le navigateur basé sur WebKit. Par conséquent, le bogue ne semble pas être corrigé complètement.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
cela fonctionne, aucun des autres ne semblait fonctionner, y compris le e.preventDefault() pour touchstart.
n'utilisez pas d'étiquette de défilement du tout sur l'iframe et ajoutez le style comme style= " overflow-x: hidden;overflow-y: auto;" cela va supprimer le rouleau horizontal et il devrait fonctionner dans l'autre sens aussi.
- Jai
paramétrant l'attribut de défilement de l'iframe à" no " devrait corriger ceci, mais il semble y avoir un bug dans webkit: https://bugs.webkit.org/show_bug.cgi?id=29240
tim's work-around ( Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar ) semble corriger le problème -- aussi longtemps que vous avez la possibilité d'éditer le document contenu par l'iframe...
cacher iframe scrolling dans google chrome, mettre le corps de la balise comme ceci
<body style="margin:0px; padding:0px; overflow:hidden;"></body>
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
1.lorsque vous changez le défilement d'iframe oui ou non, la barre de défilement d'iframe ne s'affiche pas immédiatement, vous devez rafraîchir l'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 L'IE, vous devez effacer le src d'iframe, puis rafraîchir iframe ,il sera de 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);
}