come evitare lo scorrimento della pagina dietro fancybox-2

Question

Usiamo fancybox2 per la visualizzazione delle immagini. Tutto funziona bene, ma quando l'immagine più grande viene visualizzata nella fancybox, la pagina dietro scorre verso l'alto. Dopo aver chiuso la fancybox, l'utente deve scorrere indietro verso il basso fino alla posizione, dove ha aperto la scatola. Gli esempi sul sito fancybox2 non mostrano questo comportamento. Non sono riuscito a scoprirlo, dov'è la differenza per far sì che ciò accada.

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

Stiamo usando fancybox2 come modulo all'interno di require.js. La chiamata .fancybox() si trova in un blocco $ (documento) .ready.

Lì dove 2 barre di scorrimento e ho nascosto una con css

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

Answer 1

Si può provare questo: -

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

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

} 

Si ferma lo scorrimento verticale sulla pagina padre mentre fancybox è aperto.

Answer 2

La mia ipotesi? Il selettore si fa clic al fuoco fancybox è più probabile un ancoraggio con un hashmark come:

<a href="#"> 

poi si ottiene il fancybox href dall'elemento più vicino <a>, come nel codice:

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

Qui is a DEMO che riproduce il comportamento che si sta descrivendo (scorrere il contenuto verso il basso fino a trovare la miniatura che spara fancybox)

Se ciò che ho assunto sopra è corretto, allora le possibili soluzioni sono:

1). Modificare l'hashmark nell'attributo del vostro ancoraggio href al hashtag#nogo come <a href="#nogo">

come riferisce Stuart Nicholls (cssplay) nel suo aggiornamento 15 Marzo 2005 nel post collegato.

2). O sostituire il hashmark nell'attributo del vostro ancoraggio href da javascript:; come <a href="javascript:;">

Vedi updated JSFIDDLE utilizzando la prima opzione.

Answer 3

questo ha funzionato per me:

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

Speranza che aiuta :)

Answer 4

A quanto pare, Fancybox cambia la proprietà CSS overflow su body elemento da hidden quando un'immagine viene mostrato. Ciò fa sì che lo sfondo torni verso l'alto. Tutto quello che devi fare è commentare la riga dicendo overflow: hidden !important; nella sezione .fancybox-lock nel foglio di stile jquery.fancybox.css.

Vedere anche fancybox2/fancybox causes page to to jump to the top.

Answer 5

In jquery.fancybox.css -> .fancybox-lock
cambiamento:
overflow: hidden !important;
a:
overflow: visible !important;
lavori per me :)

Answer 6

Mi rendo conto che questo problema è stato fatto un po ' fa, ma penso di aver trovato una buona soluzione per questo. Il problema è che la scatola fantasia cambia il valore di overflow del corpo per nascondere le barre di scorrimento del browser.

Come SimCity sottolinea, siamo in grado di fermare la casella operata dal fare questo con l'aggiunta dei seguenti parametri:

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

Ma, ora siamo in grado di scorrere la pagina principale, mentre guardando la nostra finestra casella di fantasia. È meglio che saltare in cima alla pagina, ma probabilmente non è ciò che vogliamo veramente.

possiamo impedire lo scorrimento nel modo giusto con l'aggiunta dei prossimi parametri:

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

E aggiungere queste funzioni da galambalaz. Vedi: 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

Questo sta lavorando bene per me:

aggiungere funzioni seguire in inizializzazione facnybox

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

Esempio:

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

spero che funzionerà per voi .

Answer 8

mia modifica, questo mi aiuta

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

in fullPage.js

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