停止Iframe阻止父文档滚动？

我似乎有与iframes和滚动其他人相反的问题。我需要iframe（包含YouTube视频）以防止滚动主文档。如果我将鼠标悬停在上面，页面将不会通过滚轮进行滚动，并且根据最新的铬触摸设备的金丝雀模拟，我无法将手指放在框架上并滚动主文档。任何方式来阻止这一点？我的CSS低于：停止Iframe阻止父文档滚动？

.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%; 
}

来源

2014-11-23 photocode

曾经有一个scrolling attribute，但它是在HTML5弃用。试试这个：

iframe { 
    overflow: hidden; 
}

不要忘了设置你的宽度和高度的地方！

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

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

看到这里的工作例如： http://jsfiddle.net/4dt4zhwt/1/

来源

2014-11-23 02:17:35 superUntitled

试过了，模拟器不会让它工作:( – photocode 2014-11-23 02:24:36

我可以让滚轮在Linux和Windows下使用chrome工作，这可能是一个Firefox的错误 – photocode 2014-11-23 02:28:20

你还看到一个滚动条吗？身高要大一些 – superUntitled 2014-11-23 02:34:35

我不知道你是否已经找到解决的办法，但我遇到了同样的问题，即我网站中的所有iframe（twitter，facebook和youtube）都阻止了页面自身的滚动。经过大量的调试和咖啡，我发现它至少在我的情况下是隐藏的，我已经在4/5父母的表单元素上隐藏起来了。删除溢出属性解决了我的问题，希望它适合你！

来源

2015-10-02 09:45:15

我在iPhone/iPad Safari上只有这个问题，这对我有用！我有'html，bo dy {overflow-x：hidden}'，因为我隐藏了屏幕内容并且不希望用户看到它。我的iFrame不会允许touchmove事件滚动页面，除非我删除该样式！我会尽力从这里出发。谢谢 – 2016-05-19 14:24:53

我水平滚动禁用，像这样：

html, body { 
    overflow-x: hidden 
}

在页面上有iframe，如果我试图通过触摸和Safari上移动的iframe的iPad或iPhone垂直滚动页面，我不能“T。

这个固定对我来说：

* { 
    -webkit-overflow-scrolling: touch 
}

来源

2016-05-20 09:10:11

这个问题不清楚，所以就到下面一些细节上的各种方法来实现这一效果，它是如何工作。

如果您不需要与iframe交互，那么快速和肮脏的解决方案是使用pointer-events: none;。这会将iframe放在页面上，而不允许它滚动。但是，它也不允许你点击它。这显然不适用于YouTube视频，但重要的是要知道这是一个选项。

如果您需要与iframe进行交互，无论是播放视频还是点击链接，您所需要做的就是确保iframe足够大以显示完整内容。我不确定OP遇到什么特定问题，因为我们没有他们的HTML，但是如果您滚动并且iframe不是也在尝试滚动，它不会阻止父级滚动。

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

最后，如果你有一个你需要滚动的iframe，但是你想在光标位于iframe上的时候滚动父级，那么你是不走运的。无法通知iframe有时用户想要滚动整个页面。这就是iframe的工作原理。您可以从iframe中移除光标进行滚动，也可以滚动到iframe的底部并继续浏览页面。

在问题中使用YouTube视频和CSS，我创建了演示here供您查看。我还包括两个相同的可滚动的iframe，并将pointer-events: none;应用于其中，以演示其工作原理。

来源

2018-02-15 18:58:26 amflare

谢谢！这正是我所需要的。 – McCuz 2018-02-19 07:37:18

停止Iframe阻止父文档滚动？

回答

相关问题