it-swarm.com.de

HTML iframe - Bildlauf deaktivieren

Ich habe folgendes iframe auf meiner Site:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-Origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

Und es hat Bildlaufleisten.
Wie kann man sie loswerden?

61
Michał Herman

Leider glaube ich nicht, dass es in vollständig konformem HTML5 nur mit HTML- und CSS-Eigenschaften möglich ist. Glücklicherweise unterstützen die meisten Browser jedoch die scrolling -Eigenschaft (die aus der HTML5-Spezifikation entfernt wurde).

overflow ist keine Lösung für HTML5, da der einzige moderne Browser, den fälschlicherweise unterstützt, Firefox ist.

Eine aktuelle Lösung wäre die Kombination der beiden:

<iframe src="" scrolling="no"></iframe>
iframe {
  overflow: hidden;
}

Dies könnte jedoch durch das Update der Browser überflüssig werden. Sie können dies für eine JavaScript-Lösung überprüfen: http://www.christersvensson.com/html-tool/iframe.htm

Edit: Ich habe geprüft und scrolling="no" funktioniert in IE10, Chrome 25 und Opera 12.12.

135
James Donnelly

Ich habe das gleiche Problem mit dieser CSS gelöst:

    pointer-events:none;
13
John Smith

Es scheint zu funktionieren 

html, body { overflow: hidden; }

inside der IFrame

edit: Natürlich funktioniert das nur, wenn Sie Zugriff auf den Iframe-Inhalt haben (den ich in meinem Fall habe)

6
Alex

Stellen Sie den gesamten Inhalt auf:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

Die Sache ist, dass die iframe-Rolle vom Inhalt NICHT vom iframe selbst gesetzt wird.

setzen Sie den Inhalt mit CSS auf 100% und den gewünschten Inhalt für den iframe in HTML

2
Verde Mc

Fügen Sie diese Stile hinzu ..für Ihr iframe-Tag .. 

overflow-x:hidden;
overflow-y:hidden;
0
sasi

Ich habe in meinem aktuellen Browser (Google Chrome Version 60.0.3112.113 (Official Build) (64-Bit)) das Scrollen = "Nein" versucht und das hat nicht funktioniert. Scroll = "no" hat jedoch funktioniert. Könnte einen Versuch wert sein

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-Origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
0
Zach Imholte

Fügen Sie einfach einen Iframe hinzu, der wie folgt dargestellt ist. Ich hoffe das löst das Problem.

1. Möglichkeit:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

2. Möglichkeit:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
0

unter html5-Versionen

iframe {
    overflow:hidden;
}

In HTML5

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

aber noch nicht richtig unterstützt

0
Prashobh

Da die "overflow: hidden;" - Eigenschaft auf dem iFrame selbst nicht richtig funktioniert, sondern Ergebnisse zu liefern scheint, wenn sie auf den Hauptteil der Seite angewendet wird innerhalb des iFrames habe ich Folgendes versucht:

iframe body { overflow:hidden; }

Was überraschenderweise hat mit Firefox funktioniert und diese nervigen Bildlaufleisten entfernt hat.

In Safari ist jedoch eine seltsame transparente Linie mit einer Breite von 2 Pixeln auf der rechten Seite des Iframes zwischen dem Inhalt und dem Rand des Iframes zu sehen. Seltsam.

0
Seb Zaremba