Jquery - Fancybox - 背景页面移位问题答案

【问题标题】：Jquery - Fancybox - Background Page Shift IssueJquery - Fancybox - 背景页面移位问题
【发布时间】：2012-09-27 19:35:05
【问题描述】：

Fancybox 加载良好，一切都按我想要的方式打开，但问题出现在后台 - 当框加载并恢复正常时，我的整个页面向右移动 8 个像素是可见的（并且令人不安）收箱时的位置。

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

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

我将主体宽度设置为 100%，边距设置为自动，内部 div 的最小宽度为 1138 像素，边距设置为自动。

有人知道我应该去哪里解决这个问题吗？

【问题讨论】：

很可能是因为页面的高度它不会创建垂直滚动条，但 fancybox 会创建它们，因此它会移动页面以为它们腾出空间。您可以尝试在 body 标签中添加 CSS overflow-y: scroll;。
谢谢，我试过了，没用。我会继续努力的。可能是 Fancybox 试图创建的叠加层可能是问题所在，我只需要缩小范围。
我可以通过链接更好地帮助您。
顺便说一句，你从来没有说过你必须发行什么版本的fancybox以及使用什么浏览器。如果有帮助，您可以查看此stackoverflow.com/a/9203557/1055987。
同stackoverflow.com/questions/9924495/…

标签： jquery css fancybox

【解决方案1】：

我最近在使用 Fancybox v2 时遇到了非常相似的情况。我的初始页面有首屏下方的内容，因此有一个滚动条（也许 OP 也有，目前尚不清楚）。触发 Fancybox 链接会导致页面正文发生相同的变化并清除滚动条；关闭 Fancybox 图像将主体向后移动并重新启用滚动条。

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

helpers: { 
    overlay: { 
        locked: false 
    } 
}

唯一需要注意的是，如果您进行滚动，这不会将您的 Fancybox 锁定在页面的中心，即具有 Fancybox 视图的页面是完全可滚动的。对我来说，这是两害相权取其轻。

【讨论】：

哇，谢谢，这让我免于拔头发。伟大的工作。
注意：这给我带来了其他问题。覆盖打开得太低，并且在浏览器缩小时消失。不过，它确实解决了轮班问题。

【解决方案2】：

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

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

瞧！ :D

【讨论】：

【解决方案3】：

您可以禁用锁定功能：

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

为我工作。

【讨论】：

这给我带来了其他问题。覆盖打开得太低，并且在浏览器缩小时消失。不过，它确实解决了轮班问题。

【解决方案4】：

这是一个已知问题，您可以在此处了解更多信息：issues, 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;
}

这工作得很好（恕我直言），尽管页面在覆盖层后面是可滚动的。

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

后来我发现元素定位为“right: 0;”向左移动了垂直滚动条的宽度。

这是因为由 fancybox.js-code 通过在 head-element 内附加一个 style-node 来设置 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)

【讨论】：

【解决方案5】：

我刚刚通过在我的 body 元素中添加“margin-right: auto !important”来解决它 :) 这超过了 Fancyboxes 自己的 margin-right: 0 的规则。

【讨论】：

【解决方案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);

}

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

这是为我做的...

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

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

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

如果您的问题是 Fancybox 打开时的固定元素跳跃，只需在 .fancybox-lock 类中包含的 CSS 中的这些元素上添加一个 padding-right: 17px。

【讨论】：

【解决方案11】：

我刚刚在 fancybox CSS 中注释了以下行

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

它开始正常工作：

fancyBox - jQuery 插件
版本：2.1.4（2013 年 1 月 10 日，星期四）

【讨论】：

【解决方案12】：

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

确保你的 wrapper 不是，它应该可以正常工作。

【讨论】：

【解决方案13】：

我对@987654321@的解决方案：

@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
}

【讨论】：