Arresta Iframe impedendo lo scorrimento del documento principale?

Question

Mi sembra di avere il problema opposto di tutti gli altri con iframe e scorrimento. Ho bisogno dell'iframe (contiene un video di youtube) per NON impedire lo scorrimento del documento principale. Se faccio passare il mouse sopra di esso, la pagina non scorrerà con la rotella di scorrimento e, in base alla più recente simulazione del canarino cromata dei dispositivi touch, non posso mettere il dito sul telaio e scorrere il documento principale. Un modo per fermare questo? Il mio CSS è qui sotto:

.GalleryVideoWrapper { 
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
padding-top: 25px; 
height: 0; 
width:95%; 
margin:auto; 
display:block; 
} 

.GalleryVideoWrapper iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

Answer 1

Ci deve essere utilizzato un scrolling attribute, ma è deprecato in HTML5. provare questo:

iframe { 
    overflow: hidden; 
} 

Non dimenticare di impostare la larghezza e l'altezza da qualche parte!

Se si voleva provare l'attributo iframe scrolling, si potrebbe in questo modo:

<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe> 

Vedi esempio di lavoro qui: http://jsfiddle.net/4dt4zhwt/1/

Answer 2

Non so se avete trovato un modo per aggirare questo , ma ho avuto lo stesso problema in cui tutti gli iframes (twitter, facebook e youtube) nel mio sito impedivano lo scorrimento della pagina stessa. Dopo un sacco di debug e caffè, l'ho trovato, almeno nel mio caso, era un overflow-x: hidden nascosto che avevo impostato su un elemento del form 4/5 genitori. La rimozione della proprietà di overflow ha risolto il problema per me, spero che funzioni per te!

Answer 3

avevo a scorrimento orizzontale disabilitata in questo modo:

html, body { 
    overflow-x: hidden 
} 

In una pagina con una iframe, se ho cercato di scorrere la pagina in senso verticale toccando e spostando l'iframe in Safari per iPad o iPhone, non potevo 't.

questa fissa per me:

* { 
    -webkit-overflow-scrolling: touch 
} 

Answer 4

La domanda non è chiara, così è andato in qualche dettaglio qui di seguito su vari modi per raggiungere questo effetto e come funziona.

Se non è necessario interagire con l'iframe, la soluzione rapida e sporca è utilizzare pointer-events: none;. Ciò inserirà l'iframe nella pagina e non gli consentirà di scorrere. Tuttavia, non ti consente di fare clic su di esso. Questo ovviamente non funzionerà per un video di YouTube, ma è importante sapere che questa è un'opzione.

Se è necessario interagire con l'iframe, per riprodurre un video o fare clic su un collegamento, è sufficiente assicurarsi che l'iframe sia sufficientemente grande da visualizzare l'intero contenuto. Non sono sicuro del problema specifico che l'OP stava incontrando perché non abbiamo il loro codice HTML, ma se si scorre e l'iframe non sta provando a scorrere, non impedirà lo scorrimento del genitore.

In sostanza, se si ha il cursore su un iframe e si scorre, l'iframe riceverà prima l'evento. Se non ha bisogno di scorrere (o non può o ha già raggiunto il fondo dell'iframe) l'evento sarà propagato al genitore.

Infine, se si dispone di un iframe da scorrere, ma si desidera far scorrere il genitore mentre il cursore si trova sull'iframe, si è sfortunati. Non c'è modo di informare l'iframe che a volte l'utente vuole scorrere l'intera pagina. Questo è semplicemente come funzionano gli iframe.Puoi rimuovere il cursore dall'iframe per scorrere, oppure scorrere fino alla fine dell'iframe e continuare lungo la pagina.

Utilizzando un video di YouTube e il CSS nella domanda, ho creato una demo here da vedere. Ho anche incluso due iframe identici che sono scorrevoli e ho applicato pointer-events: none; a uno per dimostrare come funziona.