1

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

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

我正在尝试使用 Fancybox 的beforeShow和beforeClose回调来解决这个问题，它在某些方面似乎很有效。

回调无缝地工作，当beforeShow调用 Fancybox 时，不会出现第二个滚动条。然而beforeClose，回调在某种意义上确实有效，即返回了原始滚动属性，但是会出现一个小的“blip”，导致屏幕抖动，并且所有 body 的元素都会调整大小/重塑形状，就好像有第二个滚动条一样首先。

我不确定为什么会发生这种情况，因为从技术上讲，没有第二个滚动条，但关闭 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/ - 如果您注意到，第二个滚动条出现然后在关闭灯箱后很快消失。

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

4

1 回答 1

4

只需添加helpersAPI 选项即可禁用overlay锁定，例如：

helpers: {
    overlay: {
        locked: false
    }
}

...不需要beforeShow和/或afterClose回调。

见JSFIDDLE

于 2013-02-12T04:37:11.150 回答