防止iframe滚动捕获youtube iframe嵌入chrome
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了防止iframe滚动捕获youtube iframe嵌入chrome相关的知识，希望对你有一定的参考价值。
我有一个标准的youtube嵌入来自随机视频的iframe：
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ixJ5NbvXg_A" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
我重复了几次以获得一些滚动溢出。
<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>
当我在localhost上使用django服务器提供此服务时，iframe会阻止页面滚动。
将光标移到视频上然后使用鼠标滚轮滚动时，它不起作用。
真正有趣的是，当我粘贴相同的代码并将其保存到桌面上的本地文件时。然后用chrome打开它，滚动工作在youtube视频上。
我检查了开发人员工具，提供的文件具有完全相同的HTML。有100％没有提供CSS或javascript，没有模板，没有。在这两种情况下只有一个简单的html文件。
版本71.0.3578.98（官方版）（64位）
答案
试试这个，最后一个回复 - https://github.com/alvarotrigo/fullPage.js/issues/2229
另一答案
你可以尝试改变身体的CSS
body{
overflow: auto;
}
另一答案
听起来像浏览器中的错误;这是一个简单的脚本，可以防止它发生。它向窗口添加了一个滚动事件，当页面滚动时会禁用iframe上的指针事件，然后在滚动停止后100ms重新启用它们。由于事件是在捕获模式下添加的，因此它会在iframe捕获事件之前触发。
<script>
(function() {
var iframes, locked = null;
window.addEventListener("scroll", scroll, true);
function scroll(e) {
if (!locked) {
iframes = document.querySelectorAll('iframe');
lock('none');
}
clearTimeout(locked);
locked = setTimeout(function() {
locked = null;
lock('auto');
}, 100);
}
function lock(value) {
for (var i = 0; i < iframes.length; i++) {
iframes[i].style.pointerEvents = value;
}
}
})();
</script>
另一答案
这适用于我的浏览器：
<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>另一答案
我的特殊问题是Chrome中的一个错误。如果我重新启动浏览器，它会得到解决。
以上是关于防止iframe滚动捕获youtube iframe嵌入chrome的主要内容，如果未能解决你的问题，请参考以下文章
光标位于 youtube_player_iframe 顶部时鼠标滚动卡住
YouTube iFrame 的 Fancybox/Fancyapp 滚动条——在 Firefox 中显示