Horizontale Bildlaufleiste auf einem Iframe ausblenden?

110

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

— 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

208

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

CSS overflow-y: hidden;
scrolling="no" (für HTML4)
~~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