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

Question

任何想法如何解决滚动条问题？每当在我的网站上激活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'
      });  
    }); 

Answer 1

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

helpers:  {
    overlay: {
        locked: false
    }
}

Answer 2

在以下位置编辑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; <-- 
}

Answer 3

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

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

当关闭fancybox时添加以下代码

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