Question

我正在使用Fancybox JQuery插件，但由于我的html和body CSS属性，我遇到了一个问题。目前，overflow-y属性设置为scroll，试图隐藏调整页面长度的抖动动画。

因为Fancybox正在调用第二个HTML元素（我认为），所以在调用时会出现第二个滚动条，这会再次导致抖动动画或效果。

我尝试使用Fancybox的beforeShow和beforeClose回调来解决此问题，并且在某些方面似乎有效。

beforeShow回调无缝地工作，因为当调用Fancybox时，不会出现第二个滚动条。但是，beforeClose回调在返回原始滚动属性的意义上确实起作用，但是有一个小的＆＃39;回复＆＃39;发生这种情况会导致屏幕抖动，并且所有正文元素都会调整大小/重新整形，就好像第二个滚动条一样。

我不确定为什么会发生这种情况，因为从技术上讲，没有第二个滚动条，但关闭Fancybox就好像存在一样。我可以修改CSS规则，还是使用不同的回调来防止这种情况发生？

我的Fancybox脚本：

 jQuery('.fancyboox').fancybox({
            fitToView   : false,
            width       : '90%',
            height      : '90%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            beforeShow  : function() {
                $('body, html').css('overflowY','hidden');
            },
            afterClose   : function() {
                $('body, html').css('overflowY','auto');
            }
        });

模拟相同效果的演示 - http://jsfiddle.net/NVHWw/ - 如果您注意到，第二个滚动条会在关闭灯箱后很快消失。

非常感谢，所以。非常感谢。

Answer 1

只需添加helpers API选项即可停用overlay锁定，如：

helpers: {
    overlay: {
        locked: false
    }
}

...无需beforeShow和/或afterClose回调。

参见 JSFIDDLE

使用BeforeShow / BeforeClose隐藏FancyBox中的第二个滚动条

1 个答案: