Nascondere la barra di scorrimento orizzontale su un iframe?

110

Devo nascondere la barra di scorrimento orizzontale su un iframe utilizzando css, jquery o js.

— nkcmr
fonte

1

possibile duplicato: Safari / Chrome (Webkit) - Impossibile nascondere la barra di scorrimento verticale iframe e altri

— Matt Ball

iframe non si trova nello stesso dominio della pagina principale.

— nkcmr

overflow-y: nascosto; Non funziona in Google Chrome, Safari e Opera. Provalo con jsfiddle.net/m5Btd/3

— phangia2712

208

Suggerirei di farlo con una combinazione di

CSS overflow-y: hidden;
scrolling="no" (per HTML4)
~~e seamless="seamless"(per HTML5)~~*

^{* L' seamlessattributo è stato rimosso dallo standard e nessun browser lo supporta.}

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}

<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>

Espandi lo snippet

— Chase Florell
fonte

9

Ho caricato il tuo esempio su Chrome 15 e vedo ancora le barre di scorrimento.

— Dan

61

L'aggiunta scrolling="no"dell'attributo all'iframe sembra rimuovere le barre di scorrimento in Chrome.

— Nick

2

@ Nick Non lo rimuove su Chrome almeno sul mio computer. img339.imageshack.us/img339/6685/chromelj.png

— l46kok

1

@ l46kok il tuo screenshot non includescrolling="no"

— Chase Florell

3

Nota che l' attributo apparentemente non è attualmente supportato da nessuno dei principali browser . caniuse.com/#feat=iframe-seamless

— Liyali

26

imposta l' scrolling="no"attributo nel tuo iframe.

— Rahul Dadhich
fonte

15

Se sei autorizzato a modificare il codice del documento all'interno del tuo iframee quel contenuto è visibile solo utilizzando la sua finestra principale, aggiungi semplicemente il seguente CSS nel tuo iframe:

body {
    overflow:hidden;
}

Ecco un esempio molto semplice:

http://jsfiddle.net/u5gLoav9/

Questa soluzione ti consente di:

Mantieni HTML5 valido in quanto non necessita di scrolling="no"attributo su iframe(questo attributo in HTML5 è stato deprecato).
Funziona sulla maggior parte dei browser che utilizzano CSS overflow: hidden
Non sono necessari JS o jQuery.

Appunti:

Per disabilitare le barre di scorrimento orizzontalmente, usa invece questo CSS:

overflow-x: hidden;

— GibboK
fonte

2

Questa risposta è applicabile solo per i siti Web che utilizzano Bootstrap. La funzione di incorporamento reattivo di Bootstrap si prende cura delle barre di scorrimento.

<!-- 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
fonte