Entfernen Sie die Bildlaufleiste aus dem Iframe

117

Mit diesem Code

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

So sieht es aus (die Shoutbox auf der Homepage von http://www.talkjesus.com )

Wie entferne ich die horizontale Bildlaufleiste und ändere das CSS der vertikalen Bildlaufleiste?

html css iframe Glaube an unsichtbare Dinge
quelle
2
Duplikat mit stackoverflow.com/questions/4856746/…, das eine bessere Antwort hat
Daniël Tulp

Antworten:

9

in deinem css:

iframe{
    overflow:hidden;
}
Takien
quelle
7
Danke, aber nur horizontaler Bildlauf und wird immer noch in Firefox angezeigt. Wird weder in Chrome noch im IE angezeigt. Außerdem wird CSS für die Bildlaufleiste nur im IE effektiv angewendet, nicht in FF oder Chrome (letztere zeigen standardmäßig beige Farbe / Schattierungen).
Glaube an unsichtbare Dinge
3
Dies funktioniert nicht, da der Überlauf im iframe-Dokument auftritt, das Sie aufgrund domänenübergreifender iframe-Sicherheitsbeschränkungen im Allgemeinen nicht ändern können.
thdoan
53
Dies funktioniert nicht, da dies keinen Einfluss auf den Inhalt des Iframes hat, sondern nur auf den Iframe selbst. Die Lösung ist Scrollen = "Nein".
TheLD
4
Dies ist eine falsche Antwort. Entfernt keine Bildlaufleisten in Google Chrome, aber scrolling = "no".
Anders Lindén
@LarsVandeDonk Ihre Antwort sollte die richtige Lösung sein.
Wong Jia Hau
313

Fügen Sie scrolling="no"dem Iframe ein Attribut hinzu.

GEDEIHEN
quelle
1
in der Lage, dies mit CSS zu tun?
Evorlor
1
Ja, aber in Chrome kann scrollIntoView nicht verwendet werden. Siehe code.google.com/p/chromium/issues/detail?id=137214
Peter Brand
1
Nun, dies verbirgt die Bildlaufleiste des Inhalts und verhindert das Scrollen des Inhalts. Es verhindert nicht, dass die Bildlaufleiste des Iframes angezeigt wird.
Dave Cousineau
3
Das Bildlaufattribut auf dem Iframe ist jetzt offiziell veraltet. Stattdessen sollte CSS verwendet werden.
Mike Poole
4
@MikePoole Es mag offiziell veraltet sein, aber es hat nicht geholfen, overflow:hidden;auf Chrome 65.0.3325.181 zu setzen, aber es hat scrolling="no"geholfen.
einige
28

Dies funktioniert in allen Browsern. jsfiddle hier http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>
Thyagarajan C.
quelle
21

Das Hinzufügen von scroll="no"und style="overflow:hidden"auf iframe funktionierte nicht, ich musste einen Text style="overflow:hidden"des HTML-Dokuments hinzufügen, das in iframe geladen wurde.

nirvana74v
quelle
1
Wenn dies hilft, gibt es ein Problem in Firefox. Wenn Sie ein CSS-Element transform: scale(0.7)oder ähnliches haben , werden Bildlaufleisten erstellt (die in Ihrem iFrame angezeigt werden), es sei denn, Sie schneiden es overflow: hidden;auf einem Vorfahren ab (könnte ein div anstelle von sein Körper).
WraithKenny
8
Das liegt daran, dass es "Scrollen = Nein" ist, nicht "Scrollen = Nein".
Bryan Green
meinst du geladen in unserem beladenen herum? Was ist um was herum?
João Pimentel Ferreira
Wird in <iframe src = "/ test.html"> geladen, wo test.html diese Einstellung hat.
nirvana74v
14

Versuchen Sie, ein scrolling="no"Attribut wie das folgende hinzuzufügen :

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>
Erweitern Sie das Snippet

Allabux B.
quelle
11

Einfach Hinzufügen scrolling="no"und seamless="seamless"Attribute zum Iframe-Tag. so was:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"
Nima Rahbar
quelle
13
Das nahtlose Attribut wurde aus HTML entfernt .
Neopickaze
Sie müssen CSS anstelle eines nahtlosen Attributs verwenden.
Nima Rahbar
@NimaRahbar Das nahtlose Attribut ist möglicherweise veraltet, aber CSS unterstützt keine Iframe-Parameter.
Verlassener Wagen
9

Wenn hier jemand ein Problem mit dem Deaktivieren von Bildlaufleisten auf dem hat iframe, kann dies daran liegen, dass der Inhalt des Iframes Bildlaufleisten für Elemente unterhalb des htmlElements enthält!

Einige Layouts setzen htmlund bodyauf 100% Höhe und verwenden ein #wrapperdiv mit overflow: auto;(oder scroll), wodurch der Bildlauf zum #wrapperElement verschoben wird.

In einem solchen Fall verhindert nichts, was Sie tun, dass die Bildlaufleisten angezeigt werden, außer den Inhalt der anderen Seite zu bearbeiten.

WraithKenny
quelle
8 
<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Verwenden Sie das obige div und es wird in keinem Browser eine Bildlaufleiste angezeigt.

KnightFury
quelle
3
seamlessDas Attribut ist kein gültiges HTML5, das von den meisten Browsern nicht unterstützt wird ( caniuse.com/#search=seamless ), und die meisten anderen Stile sind nicht erforderlich .
Pere
8

Fügen Sie dies in Ihr CSS ein, um beide Bildlaufleisten auszublenden

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
Deepika Patel
quelle
6

Dies ist ein letzter Ausweg, aber erwähnenswert - Sie können das ::-webkit-scrollbarPseudoelement auf dem iframeübergeordneten Element des Elternteils verwenden, um die berühmten Bildlaufleisten der 90er Jahre zu entfernen.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Bearbeiten: Obwohl es relativ unterstützt wird , ist es ::-webkit-scrollbarmöglicherweise nicht für alle Browser geeignet. mit Vorsicht verwenden :)

DotBot
quelle
2
Dies ist die einzige Antwort, die mir geholfen hat. Sie können immer noch scrollen, aber die hässliche Bildlaufleiste wird nicht angezeigt. Danke dir!
Karmidschanow
4

Fügen Sie dies in Ihr CSS ein, um nur die horizontale Bildlaufleiste auszublenden

iframe{
    overflow-x:hidden;
}
Abhidev
quelle
3 
iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

Auf diese Weise vergrößern Sie die Breite des Iframes, als es sein sollte. Dann verstecken Sie die horizontale Bildlaufleiste mit Überlauf-x: versteckt.

Nico Grill
quelle