webentwicklung-frage-antwort-db.com.de

Horizontale Bildlaufleiste auf einem Iframe ausblenden?

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

110
nkcmr

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

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

* Das seamless Attribut hat wurde entfernt vom Standard und keine Browser = unterstütze es.


.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
206
Chase Florell

einstellen scrolling="no" Attribut in Ihrem Iframe.

26
Rahul Dadhich

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

body {
    overflow:hidden;
}

Hier ein sehr einfaches Beispiel:

http://jsfiddle.net/u5gLoav9/

Mit dieser Lösung können Sie:

  • Behalten Sie die Gültigkeit von HTML5 bei, da für das iframe kein scrolling="no" - Attribut erforderlich ist (dieses Attribut in HTML5 ist veraltet).

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

  • Kein JS oder jQuery erforderlich.

Anmerkungen:

Verwenden Sie stattdessen das folgende CSS, um Bildlaufleisten horizontal zu deaktivieren:

overflow-x: hidden;
14
GibboK

Diese Antwort gilt nur für Websites, die Bootstrap verwenden. Die responsive Embed-Funktion von Bootstrap kümmert sich um 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

2
Razan Paul