javascript - 防止 iframe 在 chrome 上嵌入 iframe 上的 iframe 滚动捕获

标签 javascript html iframe youtube youtube-api

我有一个来自随机视频的标准 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>

当我在本地主机上使用 django 服务器提供此服务时,iframe 会阻止页面滚动。

当您将光标移到视频上然后使用鼠标滚轮滚动时,它不起作用。

真正有趣的是,当我粘贴相同的代码并将其保存到桌面上的本地文件时。然后用 chrome 打开它,滚动在 youtube 视频上工作。

我检查了开发人员工具,所提供的文件具有完全相同的 HTML。 100% 没有提供 CSS 或 Javascript,没有模板,什么都没有。 两种情况下都只有一个简单的 html 文件。

版本 71.0.3578.98(官方构建)(64 位)

最佳答案

关于javascript - 防止 iframe 在 chrome 上嵌入 iframe 上的 iframe 滚动捕获,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53974357/

相关文章:

html - CSS 中的字体

javascript - 从 html 运行 JavaScript 特定函数

html - 从 Chrome 迁移到 IE11 的主要样式问题

javascript - 我怎样才能用 webkit-transform 进行足够的翻译,以便

html - 图像和视频作为具有相同比例的响应元素

c# - 使用 asp.net 打开新窗口

javascript - 如何在 mongodb 中将嵌入式键值对向上移动一级

javascript - 过滤 react 组件列表

javascript - 如何正确循环 JSON 响应

javascript - 在模态中打开 URL