激活花式框2时，滚动条在父页面上闪烁，导致内容向左移动然后向后移动 [英] When a fancybox 2 is activated, a scrollbar flashes on the parent page causing the content to shift left and then back

问题描述

任何想法如何解决滚动条问题?每当在我的网站上激活一个花式框时，它都会在初始化时创建一个滚动条，然后再次闪烁掉-但这会使整个页面移动一秒钟.不是很优雅！

Any ideas how to work around the scrollbar issue? Whenever a fancybox is activated on my site it creates a scrollbar whilst initialising and then flashes away again - but this shifts the entire page over for a split second. Not very elegant!

这是Fancybox 2的错误吗?

Is this a bug with Fancybox 2?

用于激活Fancybox的代码:

Code used to activate 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代码中添加以下代码

when click to activate scroll bar just add the following code in your jQuery code

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

，然后关闭fancybox时，添加以下代码

and when close the fancybox add the following code

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

这篇关于激活花式框2时，滚动条在父页面上闪烁，导致内容向左移动然后向后移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！