Html 阻止 Iframe 阻止滚动父文档？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27084876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop Iframe from preventing scrolling of parent document?
提问by photocode
I seem to have the opposite problem of everyone else with iframes and scrolling. I need the iframe (contains a youtube video) to NOT prevent scrolling of the main document. If I hover my mouse over it, the page won't scroll with the scroll wheel, and according to the latest chrome canary simulation of touch devices, I can't put my finger on the frame and scroll the main document either. Any way to stop this? My CSS is below:
我似乎在 iframe 和滚动方面遇到了与其他人相反的问题。我需要 iframe（包含 youtube 视频）来防止滚动主文档。如果我将鼠标悬停在它上面，页面将不会随滚轮滚动，并且根据触摸设备的最新 chrome canary 模拟，我也无法将手指放在框架上并滚动主文档。有什么办法可以阻止这个吗？我的 CSS 如下：
.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%;
}
回答by amflare
The question is unclear, so I went into some detail below on various ways to achieve this effect and how it works.
这个问题不清楚，所以我在下面详细介绍了实现这种效果的各种方法以及它是如何工作的。
If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none;. This will put the iframe on the page, and not allow it to scroll. However, it also does not allow you to click on it. This obviously won't work for a YouTube video, but it is important to know this is an option.
如果您不需要与 iframe 交互，快速而肮脏的解决方案是使用pointer-events: none;. 这会将 iframe 放在页面上，并且不允许它滚动。但是，它也不允许您单击它。这显然不适用于 YouTube 视频，但重要的是要知道这是一个选项。
If you need to interact with the iframe, either to play a video or click a link, all you need to do is make sure the iframe is large enough to display the full contents. I'm unsure what specific problem OP was encountering as we don't have their HTML, but if you scroll and the iframe is not also trying to scroll, it will not prevent the parent from scrolling.
如果您需要与 iframe 交互，无论是播放视频还是单击链接，您所需要做的就是确保 iframe 足够大以显示全部内容。我不确定 OP 遇到了什么具体问题，因为我们没有他们的 HTML，但是如果您滚动并且 iframe 也没有尝试滚动，它不会阻止父级滚动。
Basically, if you have your cursor over an iframe and you scroll, the iframe will receive the event first. If it does not need to scroll (either it can't or it has already reached the bottom of the iframe) the event will be propagated to the parent.
基本上，如果您将光标悬停在 iframe 上并滚动，则 iframe 将首先接收事件。如果它不需要滚动（不能滚动或已经到达 iframe 的底部），则事件将传播到父级。
Finally, if you have an iframe that you need to be scrollable, but you want to scroll the parent while the cursor is on the iframe, you are out of luck. There is no way to inform the iframe that sometimes the user wants to scroll the whole page. This is simply how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue down the page.
最后，如果您有一个需要滚动的 iframe，但是您想在光标位于 iframe 上时滚动父级，那么您就不走运了。无法通知 iframe 有时用户想要滚动整个页面。这就是 iframe 的工作方式。您可以从 iframe 中移除光标以进行滚动，或者滚动到 iframe 的底部并继续向下滚动页面。
Using a YouTube video and the CSS in the question, I've included a demo for you to see. I also included two identical iframes that are scrollable and applied pointer-events: none;to one to demonstrate how it works.
使用 YouTube 视频和问题中的 CSS，我提供了一个演示供您查看。我还包含了两个相同的 iframe，它们可滚动并应用于pointer-events: none;其中一个以演示它是如何工作的。
.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>回答by F. Santiago
I had horizontal-scrolling disabled like so:
我像这样禁用了水平滚动：
html, body {
overflow-x: hidden
}
On a page with an iframe, if I tried to scroll the page vertically by touching and moving the iframe on Safari for iPad or iPhone, I couldn't.
在带有 的页面上iframe，如果我尝试通过在 iPad 或 iPhone 的 Safari 上触摸和移动 iframe 来垂直滚动页面，我不能。
This fixed it for me:
这为我修复了它：
* {
-webkit-overflow-scrolling: touch
}
回答by superUntitled
There used to be a scrolling attribute, but it is deprecated in html5. try this:
曾经有一个滚动属性，但在 html5 中已弃用。尝试这个：
iframe {
overflow: hidden;
}
Don't forget to set your width and height somewhere!
不要忘记在某处设置宽度和高度！
If you wanted to try the iframe scrolling attribute, you could like this:
如果你想尝试 iframe 滚动属性，你可以这样：
<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>
See working example here: http://jsfiddle.net/4dt4zhwt/1/
请参阅此处的工作示例：http: //jsfiddle.net/4dt4zhwt/1/
回答by David Gebbett
I don't know if you have found a way around this, but I had the same problem where all iframes (twitter, facebook and youtube) in my site was preventing the page itself from scrolling. After a lot of debugging and coffee, I found it, in my case at least, It was down to an overflow-x: hiddenhidden I had set on a form element 4/5 parents up. Removing the overflow property fixed the issue for me, Hope it works for you!
我不知道您是否找到了解决方法，但我遇到了同样的问题，我网站中的所有 iframe（twitter、facebook 和 youtube）都阻止页面本身滚动。经过大量调试和咖啡，我发现它，至少在我的情况下，它归结为overflow-x: hidden我在表单元素 4/5 父项上设置的隐藏。删除溢出属性为我解决了这个问题，希望它对你有用！
