阻止iframe阻止父文件的滚动？

Question

我似乎与iframes和滚动的其他人有相反的问题.我需要iframe(包含youtube视频)以防止滚动主文档.如果我将鼠标悬停在它上面,页面将不会使用滚轮滚动,并且根据触摸设备的最新镀铬金丝雀模拟,我无法将手指放在框架上并滚动主文档.有办法阻止这个吗？我的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%;
 }

Answer 1

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

如果您不需要与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>

Answer 2

曾经有一个滚动属性，但在 html5 中已被弃用。尝试这个：

iframe {
    overflow: hidden;
}

不要忘记在某处设置宽度和高度！

如果你想尝试 iframe 滚动属性，你可以这样：

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

请参阅此处的工作示例： http: //jsfiddle.net/4dt4zhwt/1/