Horizontale Bildlaufleiste auf einem Iframe ausblenden?

110

Ich muss die horizontale Bildlaufleiste auf einem Iframe mit CSS, JQuery oder JS ausblenden.

html iframe scrollbar hide nkcmr
quelle
1
Mögliches Duplikat: Safari / Chrome (Webkit) - Vertikale Iframe-Bildlaufleiste und andere
Matt Ball
iframe befindet sich nicht in derselben Domäne wie die übergeordnete Seite.
nkcmr
Überlauf-y: versteckt; Funktioniert nicht in Google Chrome, Safari und Opera. Versuchen Sie es mit jsfiddle.net/m5Btd/3
phangia2712

Antworten:

208

Ich würde vorschlagen, dies mit einer Kombination von zu tun

  1. CSS overflow-y: hidden;
  2. scrolling="no" (für HTML4)
  3. und seamless="seamless"(für HTML5)* *

* Das seamlessAttribut wurde entfernt von dem Standard, und kein Browser unterstützen.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
Erweitern Sie das Snippet

Chase Florell
quelle
9
Ich habe Ihr Beispiel in Chrome 15 geladen und sehe immer noch die Bildlaufleisten.
Dan
61
Durch Hinzufügen des scrolling="no"Attributs zum Iframe werden anscheinend Bildlaufleisten in Chrome entfernt.
Nick
2
@Nick Es entfernt es nicht auf Chrome, zumindest nicht auf meinem Computer. img339.imageshack.us/img339/6685/chromelj.png
l46kok
1
@ l46kok Ihr Screenshot enthält nichtscrolling="no"
Chase Florell
3
Beachten Sie, dass das Attribut "scheinbar" derzeit von keinem der wichtigsten Browser unterstützt wird . caniuse.com/#feat=iframe-seamless
Liyali
26

Setzen Sie das scrolling="no"Attribut in Ihrem Iframe.

Rahul Dadhich
quelle
15

Wenn Sie den Code des Dokuments in Ihrem Dokument ändern dürfen iframeund dieser Inhalt nur über das übergeordnete Fenster sichtbar ist, fügen Sie einfach das folgende CSS in Ihr hinzu iframe:

body {
    overflow:hidden;
}

Hier ein sehr einfaches Beispiel:

http://jsfiddle.net/u5gLoav9/

Mit dieser Lösung können Sie:

  • Halten Sie HTML5 gültig, da es kein scrolling="no"Attribut für das benötigt iframe(dieses Attribut in HTML5 ist veraltet).

  • Funktioniert auf den meisten Browsern mit CSS- Überlauf: versteckt

  • Kein JS oder jQuery notwendig.

Anmerkungen:

Verwenden Sie stattdessen dieses CSS, um Bildlaufleisten horizontal nicht zuzulassen:

overflow-x: hidden;
GibboK
quelle
2

Diese Antwort gilt nur für Websites, die Bootstrap verwenden. Die reaktionsschnelle Einbettungsfunktion des Bootstraps sorgt für die Bildlaufleisten.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Razan Paul
quelle