Jquery – Fancybox – 背景页面转换问题
Fancybox加载得很好，一切都按照我想要的方式打开，但问题出现在后台 – 当框加载并返回到框中的正常位置时，我的整个页面正好向右移动8个像素是可见的（并且令人不安）收盘。
我无法链接到该网站，因为它位于我们公司防火墙后面的开发服务器上。
我正在使用以下脚本：Fancybox，Quform和Jquery Banner Rotator。 fancybox调用发生在旋转器内部。 我没有修改原始jquery fancybox CSS的任何宽度/高度。
我将体宽设置为100％，边距设置为auto，内部div的最小宽度为1138px，边距设置为auto。
有谁知道我应该在哪里解决这个问题？
最近我和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
您可以禁用锁定function：
$(".fancybox").fancybox({ helpers : { overlay : { locked : false } } });
为我工作。
这是一个众所周知的问题，你可以在这里找到更多： 问题，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;”定位的元素 被垂直滚动条的宽度向左移动。
这是因为通过在head-element中附加样式节点，fancybox.js代码设置了margin-right。
要解决此问题，只需修改jquery.fancybox.js文件或jquery.fancybox-2.1.5-pack.js文件中的单行代码，具体取决于您使用的是哪一行。
在2017年的解压缩版本中：
$("").appendTo("head"); // change it to $("").appendTo("head"); // perhaps comment out the complete line, I haven't testet it though
或者在.pack文件中（EOL附近的第46行）：
/* [much more code before] */ f("").appendTo("head")})})(window,document,jQuery); // change it to: /* [much more code before] */ f("").appendTo("head")})})(window,document,jQuery); // or try to remove the "f().appendTo()"-part completely (untested)
我刚刚通过在我的身体元素中添加“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); }
我使用fancybox v.2.1.4为主体设置了固定的居中背景图像，并强制垂直滚动条始终显示。
body{ background: url('../img/sfondo.jpg') fixed center top; overflow-y: scroll; }
尽管已经强制显示滚动条，但我在mac上遇到了firefox的背景图像移位问题（因为狮子滚动条不占用页面内的空间，所以Chrome和safari都没问题），即窗户上的ff，chrome。
所以我注意到如果我在background属性上手动设置x-offset而不是world center ， 问题就消失了 ，所以我在页面的HEAD中用一些jquery来管理它：
这样做对我来说……
.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中添加一个padding-right：17px，包含在.fancybox-lock类中。
好吧，我只是评论了fancybox CSS中的以下行
/*.fancybox-lock { overflow: hidden; } */
它开始正常工作：
- fancyBox – jQuery插件
- 版本：2。1。4（2013年1月10日星期四）
我正在使用花哨的盒子3并且遇到了同样的问题，因为我的主包装器是绝对的位置。
确保你的包装不是，它应该工作正常。