Fancybox加载良好，一切都按我的意愿打开，但问题发生在后台——当盒子加载并在盒子关闭时返回正常位置时，我的整个页面向右移动了正好8个像素，这是显而易见的(也是令人不安的)。
我无法链接到该网站，因为它位于我们公司防火墙后面的开发服务器上。
我使用以下脚本：Fancybox、Quform和Jquery Banner Rotator。fancybox调用发生在旋转器内部。我没有修改原始jquery fancybox CSS的任何宽度/高度。
我将主体宽度设置为100%，并将边距设置为自动，内部div的最小宽度为1138px，并将边框设置为自动。
有人知道我应该在哪里解决这个问题吗？
我最近在使用Fancybox v2时遇到了非常类似的情况。我最初的页面在折叠下方有内容，因此有一个滚动条(也许OP也有，但不清楚)。触发Fancybox链接会导致页面正文发生同样的偏移，并清除滚动条；关闭Fancybox图像将主体向后移动并重新启用滚动条。
对.fancybox-lock的调整对我不起作用，但在实例化我的Fancybox对象时包括了以下选项：
helpers: {
overlay: {
locked: false
}
}
唯一需要注意的是，如果你进行滚动，这不会将你的Fancybox锁定在页面的中心，即具有Fancybox视图的页面是完全可滚动的。对我来说，这是两害相权取其轻。
我最近遇到了同样的问题。在fancybox CSS中找到.fancybox-lock，并将其更改为：
.fancybox-lock {
overflow: hidden;
margin: 0 !important;
}
哇！：D
您可以禁用锁定功能：
$(".fancybox").fancybox({
helpers : {
overlay : {
locked : false
}
}
});
为我工作。
这是一个已知的问题，在这里你可以找到更多：问题，fancyapps@GitHub
我使用的是fancybox2(2.1.5版本)。我通过稍微修改"jquery.fancybox.css"-文件：解决了这个问题
找到"叠加助手"部分(从第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元素中添加一个样式节点来设置边距权限。
要解决这个问题，只需修改jquery.fancybox.js文件或jquery.funcybox-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)
我刚刚通过在我的body元素中添加"margin-right:auto！important"来解决这个问题：)这个规则超出了Fancyboxes自己的margin-right：0。
在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);
}
我使用了带有固定、居中背景图像的fancyboxv.2.1.4，并强制始终显示垂直滚动条。
body{
background: url('../img/sfondo.jpg') fixed center top;
overflow-y: scroll;
}
尽管我强制显示了滚动条，但我还是遇到了mac上firefox的背景图像偏移问题(chrome和safari都可以，因为狮子滚动条不会占用页面内部的空间)，也就是说，ff，windows上的chrome。
所以我注意到，如果我在后台属性上手动设置x-offset而不是世界中心，问题就消失了。所以我在页面的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>
这是为我做的…
.fancybox-lock {
overflow: hidden !important;
padding-right: 17px;
}
.fancybox-lock body {
overflow: hidden !important;
}
您正面临滚动条的问题！只需跟踪滚动条的宽度，并将其用作">.fancybox lock的">margin right"。例如
.fancybox-lock{
margin-right: [your calculated width] !important;
}
这肯定会解决你的问题，因为我也有过一次这个问题。
如果你的问题是修复了Fancybox打开时元素跳跃的问题，只需在CSS中的这些元素上添加一个右填充：17px，包含在.Fancybox锁类中。
我刚刚在fancybox CSS 中评论了以下行
/*.fancybox-lock {
overflow: hidden;
}
*/
它开始在以下方面运行良好：
- fancyBox-jQuery插件
- 版本：2.1.4(2013年1月10日，星期四)
我使用的是花式盒子3，遇到了同样的问题，因为我的主包装器是位置绝对的。
确保你的包装不是，它应该工作正常。
我的"@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
}