防止iframe滚动捕获youtube iframe嵌入chrome

问题描述 投票:5回答:5

我有一个标准的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位)

javascript html iframe youtube youtube-api
5个回答
1
投票

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


0
投票

你可以尝试改变身体的CSS

body{
    overflow: auto;
}

0
投票

听起来像浏览器中的错误;这是一个简单的脚本,可以防止它发生。它向窗口添加了一个滚动事件,当页面滚动时会禁用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>

0
投票

这适用于我的浏览器:

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

您可以发布一个重现问题的片段吗?


0
投票

我的特殊问题是Chrome中的一个错误。如果我重新启动浏览器,它会得到解决。

© www.soinside.com 2019 - 2024. All rights reserved.