jquery - 显示带有 fancyBox 的 youtube 视频，仅在 chrome 中启用滚动

Question

我正在使用 fancyBox 的 2.1.5 版在弹出窗口中显示 Youtube 视频的插件 - 类似于 jQuery 灯箱插件的功能，仅适用于视频媒体。

这在 IE、Firefox 和 Opera 中完美运行，但在针对 Chrome 进行测试时，视频在叠加层中加载正常，但它允许您在页面上上下滚动 iframe，叠加层似乎也没有覆盖页面的整个高度。下面包含一个屏幕截图来演示:

如您所见，叠加层并未覆盖整个页面，并且允许 iframe 垂直滚动。这在其他浏览器中不是问题，似乎只是 chrome 的问题。有人以前遇到过这个吗？

我的JS+包含如下:

<script type="text/javascript" src="/Js/jquery.fancybox.js"></script>
<script type="text/javascript" src="/Js/jquery.fancybox-media.js"></script>
<link href="/Css/fancy.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
        $('.fancybox-media').fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            helpers: {
              media: {}
            }
        });
    });
</script>

和标记:

<a class="fancybox-media" href="http://youtu.be/Ut7Hrc26TAI">
    <img src="/Images/laptop-find-out-more.png" alt="Find out more" />
</a>

我正在使用 jQuery 版本 1.8.2 分钟。我已经用较新版本的 jQuery 对此进行了测试，但无济于事。

如何防止这种滚动行为并确保叠加层覆盖整个 chrome 页面？

Answer 1

最终不得不挂接到 afterShown 和 afterClose 回调并手动禁用滚动，因为似乎没有官方修复。

<script type="text/javascript">
    $(document).ready(function () {
        $('.fancybox-media').fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            afterShow: shown,
            afterClose: closed,
            helpers: {
                media: {}
            }
        });
    });

    function shown() {
        $('html, body').css({
            'overflow': 'hidden',
            'height': '100%'
        });
    }

    function closed() {
        $('html, body').css({
            'overflow': 'auto',
            'height': 'auto'
        });
    }
</script>

希望这对处于相同情况的其他人有所帮助。