Rimuovi la barra di scorrimento dall'iframe

117

Utilizzando questo codice

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Ecco come appare (lo shoutbox sulla homepage di http://www.talkjesus.com )

Come rimuovo la barra di scorrimento orizzontale e modifico il CSS della barra di scorrimento verticale?

html css iframe

— Fede nelle cose invisibili
fonte

2

duplicare con stackoverflow.com/questions/4856746/… che ha una risposta migliore

— Daniël Tulp

9

nel tuo css:

iframe{
    overflow:hidden;
}

— takien
fonte

7

Grazie, ma solo lo scorrimento orizzontale e viene ancora visualizzato in Firefox. Non viene visualizzato in Chrome né in IE. Inoltre, CSS per la barra di scorrimento viene applicato efficacemente solo in IE, non FF né Chrome (quest'ultimo mostra il colore / sfumature beige dall'aspetto predefinito).

— Fede nelle cose invisibili

3

Ciò non funzionerà perché l'overflow si verifica nel documento iframe, che in genere non potrai modificare a causa delle restrizioni di sicurezza dell'iframe interdominio.

— thdoan

54

Questo non funziona poiché non influirà sul contenuto dell'iframe, ma solo sull'iframe stesso. La soluzione è scrolling = "no".

— TheLD

4

Questa è una risposta errata, non rimuove le barre di scorrimento in Google Chrome, ma scrolling = "no" sì.

— Anders Lindén

@LarsVandeDonk La tua risposta dovrebbe essere la soluzione corretta.

— Wong Jia Hau

313

Aggiungi scrolling="no"attributo all'iframe.

— PROSPERARE
fonte

1

in grado di farlo con css?

— Evorlor

1

Sì, ma in Chrome non è possibile utilizzare scrollIntoView. Vedi code.google.com/p/chromium/issues/detail?id=137214

— Peter Brand

1

bene, questo nasconde la barra di scorrimento del contenuto e impedisce lo scorrimento del contenuto. non impedisce la visualizzazione della barra di scorrimento dell'iframe.

— Dave Cousineau

3

L'attributo di scorrimento sull'iframe è ora ufficialmente obsoleto. Al suo posto dovrebbe essere usato CSS.

— Mike Poole

4

@MikePoole Potrebbe essere ufficialmente obsoleto, ma non ha aiutato l'impostazione overflow:hidden;su Chrome 65.0.3325.181, ma ha scrolling="no"aiutato.

— alcuni il

28

Funziona in tutti i browser. jsfiddle qui http://jsfiddle.net/zvhysct7/1/

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

— Thyagarajan C
fonte

21

L'aggiunta di scroll="no"e style="overflow:hidden"su iframe non ha funzionato, ho dovuto aggiungere style="overflow:hidden"il corpo del documento html caricato all'interno di iframe.

— nirvana74v
fonte

1

Se questo aiuta, c'è un problema in Firefox, dove se hai un elemento CSS transform: scale(0.7)o simile, questo creerà barre di scorrimento (che appariranno nel tuo iFrame), a meno che non lo ritagli con overflow: hidden;su un antenato (potrebbe essere un div invece di corpo).

— WraithKenny

8

Questo perché è "scrolling = no", non "scroll = no".

— Bryan Green

vuoi dire caricato dentro il nostro caricato in giro? Cosa c'è intorno a cosa?

— João Pimentel Ferreira

caricato all'interno di <iframe src = "/ test.html"> dove test.html ha questa impostazione.

— nirvana74v

16

Prova ad aggiungere un scrolling="no"attributo come di seguito:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

Espandi lo snippet

— Allabux B
fonte

11

Basta aggiungere scrolling="no"e seamless="seamless"attributi al tag iframe. come questo:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

— Nima Rahbar
fonte

13

L'attributo seamless è stato rimosso dall'HTML .

— neopickaze

È necessario utilizzare CSS invece dell'attributo seamless.

— Nima Rahbar

@NimaRahbar L'attributo seamless potrebbe essere obsoleto, ma css non supporta i parametri iframe.

— Carrello abbandonato

9

Se qualcuno qui ha un problema con la disabilitazione delle barre di scorrimento su iframe, potrebbe essere perché il contenuto dell'iframe ha barre di scorrimento sugli elementi sotto l' htmlelemento!

Alcuni layout impostano htmle bodyall'altezza del 100% e utilizzano un #wrapperdiv con overflow: auto;(o scroll), spostando così lo scorrimento #wrappersull'elemento.

In tal caso, nulla di ciò che fai impedirà la visualizzazione delle barre di scorrimento tranne la modifica del contenuto dell'altra pagina.

— WraithKenny
fonte

8

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Usa il div sopra e non mostrerà la barra di scorrimento in nessun browser.

— KnightFury
fonte

3

seamlessl'attributo non è HTML5 valido, non è supportato dalla maggior parte dei browser ( caniuse.com/#search=seamless ) e la maggior parte degli altri stili non sono necessari.

— Pere

8

Aggiungilo nel tuo css per nascondere entrambe le barre di scorrimento

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

— Deepika Patel
fonte

6

Questa è l'ultima risorsa, ma vale la pena menzionarla: puoi usare lo ::-webkit-scrollbarpseudo-elemento sul iframegenitore di per sbarazzarti di quelle famose barre di scorrimento degli anni '90.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Modifica: sebbene sia relativamente supportato , ::-webkit-scrollbarpotrebbe non essere adatto a tutti i browser. usare con cautela :)

— DotBot
fonte

2

Questa è l'unica risposta che mi ha aiutato. Puoi ancora scorrere ma non vedi la brutta barra di scorrimento. Grazie!

— Karmidzhanov

4

Aggiungilo nel tuo css per nascondere solo la barra di scorrimento orizzontale

iframe{
    overflow-x:hidden;
}

— Abhidev
fonte

3

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

In questo modo rendi la larghezza dell'Iframe più grande di quanto dovrebbe essere. Quindi nascondi la barra di scorrimento orizzontale con overflow-x: hidden.

— Nico Grill
fonte