13

Fancybox 加载良好，一切都按我的意愿打开，但问题发生在后台 - 当盒子加载并返回到盒子上的正常位置时，我的整个页面向右移动 8 个像素是可见的（并且令人不安）关闭。

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

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

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

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

4

13 回答 13

25

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

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

helpers: { 
    overlay: { 
        locked: false 
    } 
}

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

于 2013-02-13T18:40:49.700 回答
7

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

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

瞧！:D

于 2012-10-03T04:58:42.673 回答
4

您可以禁用锁定功能：

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

为我工作。

于 2015-05-12T09:27:54.913 回答
3

这是一个已知问题，您可以在此处了解更多信息：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)
于 2014-06-24T12:49:53.293 回答
2

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

于 2013-05-31T13:30:18.703 回答
0

我使用了 fancybox v.2.1.4和一个固定的、居中的身体背景图像，并强制垂直滚动条始终显示。

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

尽管强制显示滚动条，但我在 mac 上遇到了 firefox的背景图像移位问题（chrome 和 safari 都可以，因为狮子滚动条不占用页面内的空间）和 ie,ff,chrome 在 windows 上。

所以我注意到，如果我在背景属性上手动设置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>
于 2013-05-15T09:27:03.560 回答
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);

}
于 2013-04-18T13:13:08.687 回答
0

好吧，我刚刚在 fancybox CSS 中评论了以下行

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

它开始在以下方面正常工作：

  • fancyBox - jQuery 插件
  • 版本：2.1.4（2013 年 1 月 10 日，星期四）
于 2015-05-05T10:55:49.990 回答
0

这为我做到了...

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

.fancybox-lock body {
    overflow: hidden !important;
}
于 2015-09-26T20:02:49.547 回答
0

我的解决方案"@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
}
于 2020-09-17T17:46:54.977 回答
0

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

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

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

于 2015-12-22T12:59:35.547 回答
0

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

于 2016-10-13T13:52:54.087 回答
0

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

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

于 2017-08-13T05:45:19.690 回答