的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; }