当激活fancybox 2时,父页面上的滚动条会闪烁,导致内容向左移动然后向后移动

时间:2012-03-29 11:32:27

标签: jquery fancybox

有关如何解决滚动条问题的任何想法?每当在我的网站上激活fancybox时,它会在初始化时创建一个滚动条,然后再次闪烁 - 但这会将整个页面移动一瞬间。不是很优雅!

这是Fancybox 2的错误吗?

用于激活Fancybox的代码:

$('map > area.fancybox').click(function(e) {
      e.preventDefault();
      var url = $(this).attr('href');
       $.fancybox({
          'href' : url,
           closeBtn    : true,
           width    : '467',
           height    : '609',
           fitToView  : false,
           padding   : '5',
           openEffect  : 'none',
           closeEffect  : 'none'
      });  
    }); 

8 个答案:

答案 0 :(得分:22)

只需添加选项下一个代码:

helpers:  {
    overlay: {
        locked: false
    }
}

答案 1 :(得分:12)

在以下位置编辑jquery.fancybox.css文件

.fancybox-lock {
    overflow: hidden;
}

变为

.fancybox-lock {
    overflow: hidden;
    margin-right:0 !important; <-- Add this
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

变为

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: auto; <-- 
}

答案 2 :(得分:5)

单击以激活滚动条时,只需在jQuery代码中添加以下代码

$("body").css("overflow","hidden"); // hide body scrollbar

当关闭fancybox时添加以下代码

$("body").css("overflow","auto"); // show body scrollbar

答案 3 :(得分:3)

您使用html { overflow-y: scroll; }吗?这与Fancybox发生冲突。 Fancybox为您的body添加了一个名为.fancybox-lock的课程,该课程将内容向右移动17px。

  

该脚本从&#34; body&#34;中移除滚动条。元素(通过应用&#34; fancybox-lock&#34;类)然后通过添加边距来补偿它们以避免内容转移。

您可以像这样覆盖它:

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

了解详情:https://github.com/fancyapps/fancyBox/issues/340

答案 4 :(得分:1)

确保您的Fancybox未初始化两次。我经历了多年的痛苦,当我认为Fancybox 2有AJAX窗口的错误时,让我多次初始化是我的错。

答案 5 :(得分:0)

在花哨的方框2中,大部分时间显示滚动条,为了避免这种情况,我们必须设置需要在iframe中加载的主体的高度和宽度,

即,

<body style="height:300px;width:200px;overflow:hidden">
//body content come here
</body>

这是一种方法,还有其他方法可以解决这个问题。

答案 6 :(得分:0)

尝试添加保证金。它帮助了我。

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
    margin-right: 20px;
}

答案 7 :(得分:-1)

在版本:2.1.1中,我删除了第1743 - 1749行之间的界限。糟糕的方式是但是工作。 ^ _ ^

改变这个:

if (obj.fixed && !isTouch) {
    if (obj.locked) {
        this.el.addClass('fancybox-lock');
        if (this.margin !== false) {
            $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
        }
    }
} else {
    this.update();
}

要:

if (obj.fixed && !isTouch) {

} else {
    this.update();
}