Stop Iframe verhindert das Scrollen des übergeordneten Dokuments?

Question

Ich habe das gegenteilige Problem von allen anderen mit iframes und Scrolling. Ich brauche den iframe (enthält ein Youtube-Video), um das Scrollen des Hauptdokuments NICHT zu verhindern. Wenn ich meine Maus darüber bewege, wird die Seite nicht mit dem Scrollrad scrollen, und entsprechend der neuesten Chrome-Canary-Simulation von Touch-Geräten kann ich meinen Finger nicht auf den Frame legen und das Hauptdokument scrollen. Irgendeine Möglichkeit, dies zu stoppen? Meine CSS ist unten:

.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

verwendet Es gibt eine scrolling attribute zu sein, aber es ist in html5 veraltet. versuchen Sie dies:

iframe { 
    overflow: hidden; 
} 

Vergessen Sie nicht, Ihre Breite und Höhe irgendwo einzustellen!

Wenn Sie die Iframe-Scrolling-Attribut, um versuchen möchten, können Sie dies gerne:

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

Siehe Arbeitsbeispiel hier: http://jsfiddle.net/4dt4zhwt/1/

Answer 2

Ich weiß nicht, wenn Sie einen Weg, um dieses gefunden haben , aber ich hatte das selbe Problem, bei dem alle iframes (twitter, facebook und youtube) auf meiner Seite verhinderten, dass die Seite selbst scrollte. Nach vielem Debugging und Kaffee fand ich es, zumindest in meinem Fall, es lag an einem overflow-x: hidden versteckten Ich hatte auf ein Formularelement 4/5 Eltern gesetzt. Durch das Entfernen der Überlaufeigenschaft wurde das Problem für mich behoben. Ich hoffe, es funktioniert für Sie!

Answer 3

Ich hatte horizontal scroll wie so deaktiviert:

html, body { 
    overflow-x: hidden 
} 

Auf einer Seite mit einem iframe, wenn ich die Seite vertikal durch Berühren und Bewegen des iframe auf Safari für iPad oder iPhone zu bewegen versucht, I couldn t.

Dieses regelte es für mich:

* { 
    -webkit-overflow-scrolling: touch 
} 

Answer 4

Die Frage unklar ist, so in einigen Details ging unten auf verschiedene Art und Weise diesen Effekt zu erreichen, und wie es funktioniert. Wenn Sie nicht mit dem Iframe interagieren müssen, verwenden Sie pointer-events: none;. Dadurch wird der Iframe auf die Seite gelegt und nicht durchgelassen. Sie können jedoch auch nicht darauf klicken. Dies funktioniert natürlich nicht für ein YouTube-Video, aber es ist wichtig zu wissen, dass dies eine Option ist.

Wenn Sie mit dem Iframe interagieren müssen, um entweder ein Video abzuspielen oder auf einen Link zu klicken, müssen Sie lediglich sicherstellen, dass der Iframe groß genug ist, um den gesamten Inhalt anzuzeigen. Ich bin nicht sicher, welches spezielle Problem OP begegnete, da wir keinen HTML-Code haben, aber wenn Sie scrollen und der Iframe nicht versucht, zu scrollen, verhindert dies nicht, dass der Elternteil scrollt.

Wenn Sie den Cursor über einen iframe bewegen und blättern, wird der iframe das Ereignis zuerst empfangen. Wenn es nicht gescrollt werden muss (entweder kann es nicht oder es hat bereits den unteren Rand des iframe erreicht) wird das Ereignis an den Eltern weitergegeben.

Wenn Sie einen Iframe haben, den Sie scrollbar machen müssen, aber den Elternteil scrollen möchten, während sich der Cursor auf dem Iframe befindet, haben Sie kein Glück. Es gibt keine Möglichkeit, den Iframe zu informieren, dass der Benutzer manchmal die gesamte Seite scrollen möchte. So funktionieren iframes einfach.Sie können entweder den Cursor vom iframe entfernen, um zu blättern, oder zum unteren Ende des iframes blättern und die Seite weiterlaufen lassen.

Mit einem YouTube-Video und der CSS in der Frage, ich habe eine Demo erstellt here für Sie zu sehen. Ich habe auch zwei identische iframes, die scrollbar sind, und angewendet pointer-events: none; zu einem, um zu zeigen, wie es funktioniert.