wake-up-neo.com

Safari/Chrome (Webkit) - Die vertikale Bildlaufleiste von iframe kann nicht ausgeblendet werden

Ich habe eine iframe auf www.example.com, die auf support.example.com verweist (dies ist ein CNAME für eine fremde Domäne).

Ich skaliere automatisch die Höhe meines iframes, so dass der Frame keine Bildlaufleisten benötigt, um die enthaltene Webseite anzuzeigen.

Bei Firefox und IE funktioniert das großartig, da ich <iframe ... scrolling="no"></iframe> verwende, gibt es keine Bildlaufleiste. Bei Webkit-Browsern (Safari und Chrome) bleibt die vertikale Bildlaufleiste jedoch bestehen, auch wenn ausreichend Platz für die Seite ohne die Bildlaufleiste vorhanden ist (die Bildlaufleiste ist ausgegraut).

Wie blende ich die Bildlaufleiste für Webkit-Browser aus?

cssiframesafariwebkitscrollbar
48
BrainCore

Ich bin gerade auf dieses Problem gestoßen und habe festgestellt, dass das Problem darin bestand, overflow: hidden für das HTML-Tag der Seite in der iframe zu setzen.

61
Tim

Sie können die Bildlaufleisten ausblenden und die Bildlauffunktion beibehalten (über das Touchpad oder das Bildlaufrad oder durch Berühren und Ziehen in einem Mobiltelefon oder Tablet.)

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

Natürlich können Sie den iframe beliebig in Ihr Design umwandeln und die entsprechende -mozilla- -Eigenschaft hinzufügen, damit sie auch in Firefox funktioniert.

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

Es ist ein bisschen hackend, aber ich habe dieses Problem gelöst, indem ich den <iframe> in einen <div> wickelte, die Höhe, Breite und <div> des overflow:hidden festlegte und dann die Breite und Höhe des <iframe> festlegte, um tatsächlich den Umlauf <div> zu überlaufen.

<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>

Hoffe das hilft.

16
Labu

Ich gehe davon aus, dass Sie dies versucht haben, aber haben Sie das Scrollen auf dem iframe auf no gesetzt?

<iframe scrolling="no">
11
Shpigford

Um die ausgegrauten Bildlaufleisten zu entfernen, setzen Sie "overflow: hidden;" auf dem Body-Tag der Seite, die im Iframe angezeigt wird, z. <body style="overflow:hidden;"> Das hat in Chrome 8.0.552.215 gut funktioniert und ich hatte auch "overflow: hidden" auf dem Iframe

6
Simon Jackson

Hilft das? Funktioniert auf 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

Ich habe es in meinem Blog mit scrolling = "no" nach dem style-Tag gelöst.

z.B:

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

Ich habe das Stilattribut dort gelassen, weil es korrekter ist und bei Firefox gut funktioniert hat.

2
Giles Bowkett

prüfen Sie, ob die Bildlaufleiste wirklich aus dem iframe stammt, vielleicht aus dem HTML- oder BODY.

Zum Blättern im iframe 

<iframe scrolling="no">

In css

iframe { overflow:hidden; }

or 

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

Können Sie die overflow-y-CSS-Eigenschaft für IFRAME auf visible oder hidden setzen?

2
JasonWyatt

Bei der Verwendung von Chrome 8.0.552.224 Beta unter Ubuntu 10.10 werden auf dieser Website immer noch die Ghost-Bildlaufleisten angezeigt: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling . Ich habe alle Tricks ausprobiert, die in allen Browsern funktionieren, aber nicht in WebKit-basierten Browsern. Daher scheint der Fehler nicht vollständig behoben zu sein.

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

dies funktioniert, keiner der anderen schien zu funktionieren, einschließlich e.preventDefault() für Touchstart.

2
foopanda

verwenden Sie kein Scrolling-Tag at-all im iframe und fügen Sie den Stil als style = "overflow-x: hidden; overflow-y: auto;" auch weit herum.

-Jai

1
Jai

iframe scrollen in chrom ausblenden setzen sie den tag wie folgt

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

Wenn Sie das Scrolling-Attribut des iframe auf "no" setzen, sollte das Problem beheben, scheint jedoch ein Fehler im Webkit zu liegen: https://bugs.webkit.org/show_bug.cgi?id=29240

Tims Problemumgehung ( Safari/Chrome (Webkit) - Vertikale Bildlaufleiste für iframe kann nicht ausgeblendet werden ) scheint das Problem zu beheben - , solange Sie das im iframe enthaltene Dokument bearbeiten können. .

1
Rudi

Versuche dies...

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

1.Wenn Sie das Scrollen von iframe ändern, wird die Bildlaufleiste des iframe nicht sofort angezeigt. Sie müssen das iframe aktualisieren.

2.Der HTML-Überlauf in iframe colud beeinflusst die Bildlaufleiste des iframe 

3.im IE müssen Sie das src von iframe löschen und dann das iframe aktualisieren, es wird funktionieren

4.so zeigen Sie den 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