jak zapobiec przewijaniu strony za fancybox-2

Question

Używamy fancybox2 do wyświetlania obrazów. Wszystko działa dobrze, ale gdy większy obraz jest wyświetlany w fancyboksie, strona z tyłu przewija się do góry. Po zamknięciu fancybox użytkownik musi przewinąć w dół do pozycji, w której otworzył pudełko. Przykłady na stronie Fancybox2 nie pokazują tego zachowania. Nie mogłem się dowiedzieć, gdzie jest różnica, aby tak się stało.

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

Używamy fancybox2 jako modułu w require.js. Wywołanie .fancybox() znajduje się w bloku $ (document) .ready.

Tam, gdzie 2 paski przewijania i ukryłem jedną z css

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

Answer 1

Możesz spróbować tego: -

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

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

} 

Zatrzymuje przewijanie w pionie na stronie nadrzędnej podczas fancybox jest otwarta.

Answer 2

Zgaduję? Selektor kliknięciu na ogień fancybox najprawdopodobniej kotwica z hashmark jak:

<a href="#"> 

wtedy uzyskać fancybox na href od najbliższego <a> elementu, jak w kodzie:

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

Tutaj is a DEMO Powtarzające opisywane zachowanie (przewiń zawartość do dołu, aż znajdziesz miniaturę, która wystrzeliwuje fancybox)

Jeśli powyższe założenie jest poprawne, możliwe są następujące rozwiązania:

1). Zmień hashmark w atrybucie kotwicę za href do hashtag#nogo jak <a href="#nogo">

jak określono przez Stuart Nicholls (cssplay) w jego aktualizacji z dnia 15 marca 2005 roku w połączonej postu.

2). Lub wymienić hashmark w atrybucie kotwicę za href przez javascript:; jak <a href="javascript:;">

Zobacz updated JSFIDDLE stosując pierwszą opcję.

Answer 3

Ten pracował dla mnie:

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

Nadzieja to pomaga :)

Answer 4

Najwyraźniej Fancybox zmienia właściwości CSS overflow na body elementu do hidden gdy obraz pokazał. Powoduje to przewijanie tła do początku. Wszystko, co musisz zrobić, to zakomentować wiersz z informacją: overflow: hidden !important; w sekcji .fancybox-lock w arkuszu stylów jquery.fancybox.css.

Zobacz także fancybox2/fancybox causes page to to jump to the top.

Answer 5

W jquery.fancybox.css -> .fancybox-lock
zmiana:
overflow: hidden !important;
do:
overflow: visible !important;
pracuje dla mnie :)

Answer 6

uświadamiam sobie to pytanie zostało zadane przez chwilę temu, ale myślę, że znalazłem dla niego dobre rozwiązanie. Problem polega na tym, że pole ozdobne zmienia wartość przepełnienia treści, aby ukryć paski przewijania przeglądarki.

W SimCity zwraca uwagę, możemy zatrzymać pudełko z ozdobnego robi to poprzez dodanie następujących parametrów:

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

Ale teraz możemy przewijać stronę główną patrząc na naszego okna skrzynki fantazyjne. Lepiej jest niż przeskakiwać na górę strony, ale prawdopodobnie nie jest to, czego naprawdę chcemy.

Możemy zapobiec przewijanie we właściwy sposób, dodając kolejne parametry:

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

I dodać te funkcje od galambalaz. Zobacz: 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

To działa dobrze dla mnie:

Dodaj funkcje podążać inicjalizacji facnybox

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

Przykład:

$(".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 
     } 
    } 
}); 

Mam nadzieję, że będzie pracować dla Ciebie .

Answer 8

Moja modyfikacja, to mi pomaga

/* 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; 
} 

w fullPage.js

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