Question

我在页面中添加了fancybox，以便在用户点击缩略图时显示YouTube或vimeo视频。当弹出窗口打开时，一切看起来都很好但是如果你在页面上滚动而不是停留在固定位置，弹出覆盖图和弹出窗口本身会滚动页面。 iframe实际上仍然保留在它的固定位置。此外，它会导致渲染工件显示为重复的弹出窗口。

看起来它实际上是某种渲染错误，因为工件并非真的存在。为了解决这个问题，我在javascript中添加了一个滚动监听器，它在主体的顶部添加和删除1px的填充。这会导致浏览器重绘屏幕，我猜测，重新定位覆盖/弹出窗口并清理工件。

这似乎不是一个正确的解决方案，所以我正在寻找替代解决方案来防止这个问题或至少链接到某个地方确认它是一个渲染问题。

我在最新版本的Chrome上使用fancybox2。

Answer 1

我的解决方法

    options['fixed'] = false;
    options['afterShow'] = forceUpdateUI;
    options['afterClose'] = forceUpdateUI;

    $.fancybox(
        "hello world",options
    );


}
function forceUpdateUI(){
    $('body').addClass('dummy-class');
    setTimeout(function(){
        $('body').removeClass('dummy-class');
    },500);
}

    .dummy-class{
    padding-top:1px;
    }

用iframe误导的FancyBox

1 个答案: