使用BeforeShow/BeforeClose隱藏FancyBox中的第二個滾動條

我使用的是Fancybox JQuery插件，但由於我的html和body CSS屬性而遇到問題。目前，overflow-y屬性設置爲scroll，試圖隱藏調整頁面長度的緊張動畫。使用BeforeShow/BeforeClose隱藏FancyBox中的第二個滾動條

由於Fancybox正在調用第二個HTML元素（我認爲），當調用第二個滾動條時會出現第二個滾動條，這又會導致一個動作或動畫效果。

我試圖使用Fancybox的beforeShow和beforeClose回調來解決這個問題，它似乎在某些方面是有效的。

beforeShow回調無縫工作，因爲當調用Fancybox時，不會出現第二個滾動條。但是，beforeClose回調函數確實返回原始滾動屬性，但會出現一個小的「點」，導致屏幕抖動，並且所有身體元素都會調整大小/重新塑形，就好像有一秒鐘滾動條開始。

我不知道爲什麼會發生這種情況，因爲技術上沒有第二個滾動條，但關閉Fancybox的行爲就好像有。是否有我可以修改的CSS規則，或者不同的回調來防止這種情況？

我的fancybox腳本：

jQuery('.fancyboox').fancybox({ 
      fitToView : false, 
      width  : '90%', 
      height  : '90%', 
      autoSize : false, 
      closeClick : false, 
      openEffect : 'none', 
      closeEffect : 'none', 
      beforeShow : function() { 
       $('body, html').css('overflowY','hidden'); 
      }, 
      afterClose : function() { 
       $('body, html').css('overflowY','auto'); 
      } 
     });

仿效同樣的效果的演示 - http://jsfiddle.net/NVHWw/ - 如果你會發現，第二滾動條出現，然後在關閉燈箱很快消失。

非常感謝，SO。非常感激。

來源

2013-02-11 RCNeil

只需添加helpers API選項來禁用overlay鎖，如：

helpers: { 
    overlay: { 
     locked: false 
    } 
}

...沒有必要的beforeShow和/或afterClose回調。

見JSFIDDLE

來源

2013-02-12 04:37:11 JFK

真棒響應。感謝您的輸入！ – RCNeil 2013-02-12 15:11:59

使用BeforeShow/BeforeClose隱藏FancyBox中的第二個滾動條

回答

相關問題