在 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%;
}
【问题讨论】：
曾经有一个scrolling attribute，但在 html5 中已弃用。试试这个：
iframe {
overflow: hidden;
}
别忘了在某处设置宽度和高度！
如果你想尝试 iframe 滚动属性，你可以这样：
<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>
在此处查看工作示例： http://jsfiddle.net/4dt4zhwt/1/
【讨论】：
我不知道您是否找到了解决此问题的方法，但我遇到了同样的问题，我网站中的所有 iframe（twitter、facebook 和 youtube）都阻止了页面本身滚动。经过大量的调试和咖啡，我发现它，至少在我的情况下，它归结为 overflow-x: hidden hidden 我在表单元素上设置了 4/5 父级。删除溢出属性为我解决了这个问题，希望它对你有用！
【讨论】：
html,body { overflow-x: hidden }，因为我在屏幕外隐藏了内容并且不希望用户看到它。我的 iFrame 不允许 touchmove 事件滚动页面，除非我删除该样式！我会尝试从这里出发。谢谢
我像这样禁用了水平滚动：
html, body {
overflow-x: hidden
}
在带有iframe 的页面上，如果我尝试通过在 iPad 或 iPhone 的 Safari 上触摸和移动 iframe 来垂直滚动页面，我做不到。
这为我解决了问题：
* {
-webkit-overflow-scrolling: touch
}
【讨论】：
这个问题不清楚，所以我在下面详细介绍了实现此效果的各种方法及其工作原理。
如果您不需要与 iframe 交互，快速而肮脏的解决方案是使用pointer-events: none;。这会将 iframe 放在页面上，并且不允许它滚动。但是，它也不允许您单击它。这显然不适用于 YouTube 视频，但重要的是要知道这是一个选项。
如果您需要与 iframe 进行交互，无论是播放视频还是点击链接，您所需要做的就是确保 iframe 足够大以显示全部内容。我不确定 OP 遇到了什么具体问题，因为我们没有他们的 HTML，但是如果你滚动并且 iframe 也没有尝试滚动，它不会阻止父级滚动。
基本上，如果您将光标悬停在 iframe 上并滚动，则 iframe 将首先接收事件。如果它不需要滚动（它不能滚动或者它已经到达 iframe 的底部），则该事件将被传播到父级。
最后，如果您有一个需要滚动的 iframe，但您想在光标位于 iframe 上时滚动父级，那么您就不走运了。无法通知 iframe 有时用户想要滚动整个页面。这就是 iframe 的工作原理。您可以将光标从 iframe 中移除以进行滚动，也可以滚动到 iframe 底部并继续向下滚动页面。
使用 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>【讨论】：
pointer-events: none..
我有一个全宽的 iframe（里面有一个 Vimeo 视频），它可以防止页面滚动。
这是我解决这个问题的方法：
<div class="video">
<iframe src="path-to-video"></iframe>
</div>
.video iframe {
pointer-events: none;
}
有关此 css 属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
【讨论】：