Stop Iframe from preventing scrolling of the parent document?

Question

I seem to have the opposite problem for everyone else with iframes and scrolling. I need an iframe (contains YouTube videos) to NOT prevent scrolling of the main document. If I move the cursor over it, the page will not scroll with the scroll wheel, and, according to the latest modeling of chrome canary touch devices, I can’t put my finger in the frame and scroll through the main document. Any way to stop this? My CSS is below:

.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

The question is not clear, so I examined in detail several ways to achieve this effect and how it works.

If you don't need to interact with iframes, a quick and dirty solution is to use pointer-events: none; This will put an iframe on the page and prevent it from scrolling. However, it also does not allow you to click on it. Obviously this will not work for YouTube videos, but it’s important to know that this is an option.

If you need to interact with the iframe to play the video or click the link, all you have to do is make sure that the iframe is large enough to display the full content. I don’t know what specific problems the OP was facing, since we don’t have their HTML, but if you scroll and iframe also doesn’t try to scroll, this will not prevent the parent from scrolling.

Basically, if you hover over an iframe and scroll, the iframe will receive the event first. If it does not need to scroll (either it cannot, or it has already reached the bottom of the iframe), the event will be passed to the parent element.

Finally, if you have an iframe that you need to scroll through, but you want to scroll the parent while the cursor is on the iframe, you're out of luck. It is not possible to tell the iframe that sometimes the user wants to scroll the entire page. This is just how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue working on the page.

Using the YouTube video and CSS in this question, I have included a demo for you. I also included two identical iframes, which are scrollable and applicable pointer-events: none; to demonstrate how this works.

 .tall { height: 1500px; } .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%; } .scrolling-iframe { margin-top: 35px; display: inline-block; height: 500px; } .no-scroll { pointer-events: none; } 

 <div class="tall"> <div class="GalleryVideoWrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/hzB53YL78rE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <iframe class="scrolling-iframe" src="https://www.wikipedia.org/" frameborder="1"></iframe> <iframe class="scrolling-iframe no-scroll" src="https://www.wikipedia.org/" frameborder="1"></iframe> </div> 

Answer 2

I disabled horizontal scrolling:

 html, body { overflow-x: hidden } 

On a page with an iframe , if I tried to scroll the page vertically by clicking and moving the iframe to Safari for iPad or iPhone, I couldn't.

This is fixed for me:

 * { -webkit-overflow-scrolling: touch } 

Answer 3

There used to be a scroll attribute , but it's deprecated in html5. try the following:

 iframe { overflow: hidden; } 

Do not forget to specify the width and height somewhere!

If you want to try the iframe scroll attribute, you might like the following:

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

See a working example here: http://jsfiddle.net/4dt4zhwt/1/

Answer 4

I don’t know if you found a way around this, but I had the same problem as all the iframes (twitter, facebook and youtube) on my site did not allow me to scroll the page. After a lot of debugging and coffee, I found it, at least in my case. This was before the hidden overflow-x: hidden installed on the 4/5 parent element. Removing the overflow property fixed the problem for me, hope this works for you!