如何防止頁面滾動到fancybox-2

Question

我們使用fancybox2來顯示圖片。一切正常，但當大圖像顯示在fancybox中時，後面的頁面會滾動到頂部。在關閉fancybox之後，用戶必須向下滾動回到打開盒子的位置。 fancybox2網站上的示例不顯示此行爲。我無法發現，發生這種情況的區別在哪裏。

fancyOptions = { 
    type: 'image', 
    closeBtn: false, 
    autoSize: false, 
    scrolling: 'no', 
    type: 'image', 
    padding: [10,10,10,10], 
    beforeLoad: function(){ 
    this.title = getTitle(this); 
    this.href = $(this.element).closest('a').attr('href'); 
    }, 
    helpers: { 
    overlay: { 
     css: { 
     'background': 'rgba(0, 0, 0, 0.7)' 
     }, 
    }, 
    title: { 
     type: 'inside' 
    } 
    } 
}; 

我們在require.js中使用fancybox2作爲模塊。.fancybox（）調用位於$（document）.ready塊中。

其中有2個滾動條和我躲在一個用CSS

.fancybox-overlay { 
overflow: hidden !important; 
} 

Answer 1

你可以試試這個： -

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

afterClose: function(){ 
$("body").css({'overflow-y':'visible'}); 

} 

它停止垂直滾動父頁面上同時的fancybox是開放的。

Answer 2

我的猜測是？您按一下火的fancybox的選擇是最有可能與一個錨​​，如：

<a href="#"> 

，那麼你得到的fancybox的href從最近<a>元素，如代碼：

beforeLoad: function(){ 
    this.title = getTitle(this); 
    this.href = $(this.element).closest('a').attr('href'); 
    } 

這裏is a DEMO重現您所描述的行爲（向下滾動內容直到找到引發fancybox的縮略圖）

如果我以上所假設的是正確的，那麼您可能的解決方案是：

1）。改變你的錨的href屬性​​到hashtag#nogo像<a href="#nogo">

由Stuart Nicholls (cssplay)在他2005年3月15日更新的鏈接後簡稱。 2）。或javascript:;替換你的錨的href屬性​​像<a href="javascript:;">

選擇第一種方法見updated JSFIDDLE。

Answer 3

這爲我工作：

$.fancybox({ 
     scrolling : 'hidden', 
     helpers: { 
      overlay: { 
       locked: true 
      } 
     }); 

希望它能幫助:)

Answer 4

顯然，的fancybox拍攝照片時顯示body元素的CSS屬性overflow變爲hidden。這會導致背景滾動回頂部。你所要做的就是在樣式表jquery.fancybox.css中註釋overflow: hidden !important;的.fancybox-lock這一行。

請參閱fancybox2/fancybox causes page to to jump to the top。

Answer 5

在jquery.fancybox.css - > .fancybox鎖
變化：
overflow: hidden !important;
到：
overflow: visible !important;
作品對我來說:)

Answer 6

我意識到這個問題已經被問了一會兒以前，但我認爲我找到了一個很好的解決方案。 問題是，花式框改變了正文的溢出值以隱藏瀏覽器滾動條。

正如模擬城市所指出的，我們可以通過添加以下參數做這個停止看中框：

$('.image').fancybox({ 
    padding: 0, 
    helpers: { 
    overlay: { 
     locked: false 
    } 
    } 
}); 

但是，現在一邊看着我們看中框窗口，我們可以滾動主頁。這比跳到頁面頂部要好，但這可能不是我們真正想要的。

我們可以防止添加下一個參數滾動的正確方法：

$('.image').fancybox({ 
     padding: 0, 
     helpers: { 
     overlay: { 
      locked: false 
     } 
     }, 
    'beforeLoad': function(){ 
     disable_scroll(); 
     }, 
    'afterClose': function(){ 
     enable_scroll(); 
     } 
    }); 

而且從galambalaz添加這些功能。請參閱：How to disable scrolling temporarily?

var keys = [37, 38, 39, 40]; 

    function preventDefault(e) { 
     e = e || window.event; 
     if (e.preventDefault) e.preventDefault(); 
     e.returnValue = false; 
    } 

    function keydown(e) { 
     for (var i = keys.length; i--;) { 
      if (e.keyCode === keys[i]) { 
       preventDefault(e); 
       return; 
      } 
     } 
    } 

    function wheel(e) { 
     preventDefault(e); 
    } 

    function disable_scroll() { 
     if (window.addEventListener) { 
      window.addEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = wheel; 
     document.onkeydown = keydown; 
    } 

    function enable_scroll() { 
     if (window.removeEventListener) { 
      window.removeEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
    } 

Answer 7

這是對我工作的罰款：

添加後續功能facnybox初始化

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

例子：

$(".fancyBoxTrigger").fancybox({ 
    maxWidth : 820, 
    maxHeight : 670, 
    fitToView : false, 
    width  : 760, 
    height  : 580, 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    padding  : 10, 
    closeBtn : false, 
    beforeShow: function(){ 
     $("body").css({'overflow-y':'hidden'}); 
    }, 
    afterClose: function(){ 
     $("body").css({'overflow-y':'visible'}); 
    }, 
    helpers : { 
     overlay : { 
      opacity: 0.4, 
      locked: false 
     } 
    } 
}); 

我希望它會爲你工作。

Answer 8

我的修改，這幫助我

/* Fancybox */ 
$('.fancybox').fancybox({ 
    beforeShow: function(){ 
     $("body").css({ 
      "overflow-y": "hidden", 
      "position": "fixed" 
      } 
     ); 
    }, 
    afterClose: function(){ 
     $("body").removeAttr("style"); 
    } 
}); 

Answer 9

$('.fancybox').fancybox({ 
'beforeLoad': function(){ 
    disable_scroll(); 
    }, 
'afterClose': function(){ 
    enable_scroll(); 
    } 
}); 

var disabled_scroll = false; 

function disable_scroll() { 
    disabled_scroll = true; 
} 

function enable_scroll() { 
    disabled_scroll = false; 
} 

在fullPage.js

function scrollPage(element, callback, isMovementUp) 
{ 
    if(disabled_scroll) return; 
    ..... 
}