Question

Fancybox正在加载，所有内容都按照我的要求打开，但问题出现在背景中 - 当框加载并恢复正常时，我的整个页面向右移动了8个像素，这是可见的（并且令人不安）关闭盒子的位置。

我无法链接到该网站，因为它位于公司防火墙后面的开发服务器上。

我正在使用以下脚本：Fancybox，Quform和Jquery Banner Rotator。 fancybox调用发生在旋转器内部。我没有修改原始jquery fancybox CSS的任何宽度/高度。

我将体宽设置为100％，边距设置为auto，内部div的最小宽度为1138px，边距设置为auto。

有谁知道我应该在哪里解决这个问题？

Answer 1

最近我和Fancybox v2的情况非常相似。我的初始页面内容低于折叠，因此有一个滚动条（也许OP也做了，它不清楚）。触发Fancybox链接导致页面正文移位并清除滚动条;关闭Fancybox图像会将身体向后移动并重新启用滚动条。

对.fancybox-lock的调整对我不起作用，但在实例化我的Fancybox对象时包括以下选项：

helpers: { 
    overlay: { 
        locked: false 
    } 
}

唯一需要注意的是，如果您进行滚动操作，则不会将您的Fancybox锁定到页面中心，即具有Fancybox视图的页面完全可滚动。对我来说，这是两个邪恶中较小的一个。

Answer 2

我最近遇到了同样的问题。在fancybox CSS中找到.fancybox-lock，然后将其更改为：

.fancybox-lock {
    overflow: hidden;
    margin: 0 !important;
    }

瞧！：d

Answer 3

您可以禁用锁定功能：

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

为我工作。

Answer 4

这是一个已知问题，您可以在这里找到更多信息：issues, fancyapps @ GitHub

我正在使用fancybox2（版本2.1.5）。我通过稍微修改'jquery.fancybox.css'文件解决了这个问题：

找到'Overlay helper'部分（从第165行开始）并更改两条规则：

.fancybox-lock {
/*  overflow: hidden !important;*/
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    width: auto;
}

和第二条规则：

.fancybox-lock .fancybox-overlay {
/*  overflow: auto;
    overflow-y: scroll;*/
    overflow: hidden !important;
}

虽然页面可以在叠加层后面滚动，但效果还不错（imho）。

至少令人不安的“右移”效应受到抑制。

我后来发现那些位置为“right：0;”的元素被垂直滚动条的宽度向左移动。

这是因为fancybox.js代码通过在head-element中附加样式节点来设置margin-right。

要解决此问题，只需修改jquery.fancybox.js文件或jquery.fancybox-2.1.5-pack.js文件中的单行代码，具体取决于您使用的是哪一行。

2017年解压缩版本的

：

$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");

// change it to

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head");

// perhaps comment out the complete line, I haven't testet it though

或.pack文件（EOL附近的第46行）：

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);

// change it to:

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery);

// or try to remove the "f().appendTo()"-part completely (untested)

Answer 5

我刚刚通过将“margin-right：auto！important”添加到我的body元素来解决它:)这超过了Fancyboxes自己的margin-right：0。

Answer 6

在2.1.3版中，在jquery.fancybox.js中注释掉第1802-1807行（下面）。

if (!this.overlay) {

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false;

this.el     = document.all && !document.querySelector ? $('html') : $('body');

this.create(opts);

}

Answer 7

我使用了fancybox v.2.1.4 ，并为主体添加了固定的居中背景图像，并强制垂直滚动条始终显示。

body{
  background: url('../img/sfondo.jpg') fixed center top;
  overflow-y: scroll;
}

尽管已经强制显示滚动条，但我在Mac上 firefox 时出现了背景图像移位问题（因为狮子滚动条不占用页面空间，所以Chrome和safari都没问题），ff，在windows上镀铬。

所以我注意到，如果我在背景属性上手动设置 x-offset 而不是世界 center ，则问题已经消失，所以我在页面的HEAD中用一点jquery来管理它：

<script>
    function centerTheBackground(){
        var pageWidth = $(window).width();
        var imageWidth = 1920; //set here the width of the background image
        var xOffset = (imageWidth/2) - (pageWidth/2);
        jQuery('body').css('background-position', '-' + xOffset + "px top");
    }


    jQuery(function($){
        centerTheBackground();
    });


    $(window).resize(function() {
        centerTheBackground(); //re-center the background image during window resizing
    });             
</script>

Answer 8

我刚刚在fancybox CSS中评论了以下一行

/*.fancybox-lock {
    overflow: hidden;
}
*/

它开始正常工作：

fancyBox - jQuery插件
版本：2。1。4（2013年1月10日星期四）

Answer 9

这对我有用......

.fancybox-lock {
        overflow: hidden !important;
        padding-right: 17px;
}

.fancybox-lock body {
    overflow: hidden !important;
}

Answer 10

您正面临滚动条的问题！只需跟踪滚动条宽度，并将该宽度用作' .fancybox-lock '' margin-right '。例如，

.fancybox-lock{
       margin-right: [your calculated width] !important;
 }

这肯定会解决您的问题，因为我也曾遇到过这个问题。

Answer 11

如果你的问题是固定元素在Fancybox打开时跳转，那么简单地向你的CSS中的那些元素添加一个padding-right：17px，包含在.fancybox-lock类中。

Answer 12

我正在使用花哨的盒子3并且遇到了同样的问题，因为我的主包装器是位置绝对的。

确保你的包装没有，它应该可以正常工作。

Answer 13

我对"@fancyapps/fancybox": "^3.5.7"的解决方案：

@import '@fancyapps/fancybox';

.fancybox-active {
  height: 500px; // fix fancybox showing skiplinks
}

.compensate-for-scrollbar {
  margin-right: auto !important; // fix fancybox messing body's margin: 0 auto
}

body.compensate-for-scrollbar {
  overflow: auto; // fix fancybox jerking background because of hiding scrollbar
}

Jquery - Fancybox - 背景页面转换问题

13 个答案: