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.



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

Risposte:


208

Suggerirei di farlo con una combinazione di

  1. CSS overflow-y: hidden;
  2. scrolling="no" (per HTML4)
  3. 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>


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


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;

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.