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

Question

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

这在 IE、Firefox 和 Opera 中完美运行，但是在针对 Chrome 进行测试时，视频可以很好地加载到叠加层中，但是它允许您在页面上下滚动 iframe，叠加层似乎也没有覆盖页面的整个高度。下面附上一张截图来演示：

如您所见，overlay 不会覆盖整个页面，并且 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>

希望这可以帮助处于相同情况的其他人。