的fancybox V2.1.3双浏览器滚动条

Question

我有以下的在我的样式表设定，以确保每个页面的宽度基本相同，因此事情不会在“短”页面中移动：html { overflow-y:scroll; }

使用的fancybox V2.1.3 ，以防止长时间的fancybox iframe的页面重复滚动条，我使用以下命令：

$(".modal").fancybox({ 
      width : '520', 
      height : 'auto', 
      fitToView : false, 
      autoSize : false, 
      closeClick : false, 
      openEffect : 'none', 
      closeEffect : 'none', 
      beforeShow: function(){ 
      $("html").css({'overflow-y':'hidden'}); 
      }, 
      afterClose: function(){ 
      $("html").css({'overflow-y':'visible'}); 
      }, 
      helpers : { 
       overlay : { 
        css : { 
         'background' : 'rgba(255, 255, 255, 0.9)' 
        } 
       } 
      } 
     }); 

通知即关闭了滚动条以上内以下，同时发射的fancybox：

beforeShow: function(){ 
    $("html").css({'overflow-y':'hidden'}); 
}, 
afterClose: function(){ 
    $("html").css({'overflow-y':'visible'}); 
}, 

这样做的诀窍，然后创建的问题是，当Fancybox叠加打开时，因为我已经隐藏了overflow-y元素，整个背景都会右移，然后当我关闭fancybox页面时，它会发生变化当我将溢出-y重新打开时再回来。不漂亮。

我知道有一个CSS变化来阻止这种转变的运动，但是这是由上述beforeShow功能覆盖：

body.fancybox-lock{ 
    overflow:visible !important; 
    margin-right:auto !important; 
} 

你不能兼得，或者你能吗？

看来我可以有一个静态背景的fancybox弹出窗口，但随着双滚动条，如果很长的网页，或单滚动而是转移背景

是否有解决方法吗？

Answer 1

如果我正确理解你的问题，你可以通过添加下列选项到您的fancybox配置禁用的fancybox的覆盖锁功能：

helpers : { 
    overlay : { 
     locked : false 
    } 
} 

然后你可以使用html { overflow-y:scroll; }没有任何冲突。

缺点是如果用户（例如）用户打开了页面，则该页面现在将滚动到Fancybox覆盖图下方。滚动他们的鼠标滚轮。

Answer 2

在你的CSS，使用方法：

body {overflow:scroll; overflow-x: auto; overflow-y: scroll; }

而不是：

html body {overflow:scroll; overflow-x: auto; overflow-y: scroll; }