在 chrome 上嵌入 iframe 时阻止 iframe 滚动捕获

Question

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

Answer 1

你可以试试把body的css换成

body{
    overflow: auto;
}

Answer 2

在我看来像是浏览器中的错误；这是一个简单的脚本，可以防止它发生。它向 window 添加了一个滚动事件，该事件在页面滚动时禁用 iframe 上的指针事件，然后在滚动停止 100 毫秒后重新启用它们。由于事件是在捕获模式下添加的，它会在 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>

Answer 3

这在我的浏览器中运行良好：

<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>

你能 post 一个重现问题的片段吗？

Answer 4

试试这个，最后一个回复-https://github.com/alvarotrigo/fullPage.js/issues/2229

Answer 5

我的特殊问题是 Chrome 中的错误。重启浏览器就解决了

在 chrome 上嵌入 iframe 时阻止 iframe 滚动捕获

Prevent iframe scroll capture on youtube iframe embed on chrome

html

javascript

youtube

iframe

youtube-api