Html 是否停止Iframe以防止父文档滚动？

我似乎与其他人在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%;
 }

以前有一个，但在html5中不推荐使用。试试这个：

iframe {
    overflow: hidden;
}

别忘了在某处设置你的宽度和高度

如果您想尝试iframe滚动属性，可以如下所示：

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

请参见此处的工作示例：

---

我不知道你是否找到了解决方法，但我遇到了同样的问题，我网站上的所有iFrame（twitter、facebook和youtube）都阻止了页面本身的滚动。经过大量的调试和咖啡，我发现它，至少在我的例子中，它是一个

overflow-x:hidden

hidden，我在表单元素4/5上设置的。移除溢出属性为我解决了这个问题，希望它对你有用

我禁用了水平滚动，如下所示：

html, body {
    overflow-x: hidden
}

在带有

iframe

的页面上，如果我试图在Safari for iPad或iPhone上通过触摸和移动iframe来垂直滚动页面，我就做不到

这为我解决了这个问题：

* {
    -webkit-overflow-scrolling: touch
}

---

这个问题还不清楚，所以我在下面详细介绍了实现这种效果的各种方法及其工作原理

如果您不需要与iframe交互，那么快速而肮脏的解决方案就是使用。这将把iframe放在页面上，不允许它滚动。但是，它也不允许您单击它。这显然不适用于YouTube视频，但重要的是要知道这是一种选择

如果需要与iframe交互（播放视频或单击链接），则只需确保iframe足够大以显示全部内容。我不确定OP遇到了什么具体问题，因为我们没有他们的HTML，但是如果您滚动并且iframe也没有尝试滚动，它将不会阻止父对象滚动

基本上，如果将光标放在iframe上并滚动，iframe将首先接收事件。如果不需要滚动（不能滚动或已经到达iframe的底部），事件将传播到父级

最后，如果您有一个需要可滚动的iframe，但您希望在光标位于iframe上时滚动父对象，那么您就倒霉了。无法通知iframe用户有时想要滚动整个页面。这就是iFrame的工作方式。您可以从iframe中删除光标以进行滚动，也可以滚动到iframe的底部并继续向下页面

使用YouTube视频和问题中的CSS，我为您提供了一个演示。我还包括了两个相同的iframe，它们是可滚动的，并且应用了

指针事件：无到一，以演示其工作原理


.toll{
高度：1500px；
}
GalleryVideoWrapper先生{
位置：相对位置；
垫底：56.25%；
/* 16:9 */
填充顶部：25px；
身高：0；
宽度：95%；
保证金：自动；
显示：块；
}
.GalleryVideoWrapper iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.滚动iframe{
利润上限：35px；
显示：内联块；
高度：500px；
}
.没有卷轴{
指针事件：无；
}
我有一个全宽的iframe（里面有一个Vimeo视频），它可以防止页面滚动

以下是我如何解决这个问题的：

<div class="video">

    <iframe src="path-to-video"></iframe>

</div>


.video iframe {
    pointer-events: none;
}


.视频iframe{
指针事件：无；
}

有关此css属性的更多信息：
我可以在Linux和Windows中使用chrome滚轮。这可能是firefox的错误。你还看到滚动条吗？尝试将高度设置为更大的值。IE和opera也不行：（很抱歉，您遇到了问题。这在ie、firefox和chrome中为我工作。在OSX和Windows上。祝您好运。嘿，您的小提琴工作……我正在使用fitfid.js缩放视频。有没有一种方法可以设置此脚本的高度？我只在iPhone/iPad Safari上有此问题，这对我有效！我有
html，body{overflow-x:hidden}
，因为我在屏幕外隐藏了内容，不想让用户看到。我的iFrame将不允许touchmove事件滚动页面，除非我删除该样式！我将尝试从这里开始。谢谢谢谢！这正是我需要的。重点是你只需要在css中添加
指针事件：无
。现在我们无法单击任何内容不过，这并不是一个可行的解决方案，至少对我来说是这样。