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

有没有办法解决滚动条问题？每当在我的网站上激活fancybox时，它会在初始化时创建一个滚动条，然后再次闪烁——但这会在一瞬间改变整个页面。不太优雅

这是Fancybox 2的bug吗

用于激活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'
      });  
    }); 

---

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

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

当关闭fancybox时，添加以下代码

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

---

确保你的Fancybox没有被初始化两次。我经历了多年的痛苦，当我认为Fancybox 2在AJAX窗口上有漏洞时，是我让它多次初始化的错误。

你使用

html{overflow-y:scroll；}

？这与Fancybox冲突。Fancybox将一个名为

.Fancybox lock

的类添加到

正文中，该类将内容向右移动17px

脚本从“body”元素中删除滚动条（通过应用“fancyboxlock”类），然后通过添加边距来补偿滚动条，以避免内容移动

您可以这样覆盖它：

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

阅读更多信息：
在fancy box 2中，大多数时间显示滚动条，为了避免这种情况，我们必须设置需要在iframe中加载的躯干高度和宽度

即


//身体内容到这里来

这是一种方法，还有其他一些方法可以解决此错误。
在以下位置编辑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: auto; <-- 
}

变成

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

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

.fancybox lock.fancybox覆盖{
溢出：自动；
overflow-y:auto；在版本：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();
}

致：

只需在下一代码中添加选项：

helpers:  {
    overlay: {
        locked: false
    }
}

试着增加一点利润，这对我很有帮助

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

很好的解决方案，谢谢。很遗憾不得不用一个函数来修改CSS来修复一个bug！我认为这不是一个bug（你需要在声明之前提供更多的元素）。它应该是你自己的页面CSS设置（例如一个浮动元素）当fancybox附加到
主体上时，它可能会在主体的高度上产生一个额外的间隙，这样滚动条就会出现。我从未见过这种行为，所以上面的解决方法非常具体。这对我很有效，因为我在html/主体上有
overflow-y:scroll
属性，就像OP可能做的那样，但你仍然可以看到第二个滚动条在效果期间消失。最好不要让它出现。这并不能解决firefox中的问题。它还引入了Safari。这可能是OP的体验，就像我自己一样。我已经设置了
overflow-y:scroll
所以它出现了两次。在我看来，这应该是正确的答案这很可能是问题的根本原因，不应忽视。依我看，这也是真正的答案。我们不必修改任何底层css！+1它有帮助，但允许滚动背景
.fancybox-lock {
    overflow: hidden !important;
    width: auto;
    margin-right: 20px;
}