fancybox2 / fancybox fa sì che la pagina salti all'inizio

105

Ho implementato fancybox2 su un sito di sviluppo.

Quando aggancio il fancybox (clicco sul collegamento ecc.) L'intero HTML si sposta dietro di esso e va in alto. Ho funzionato bene in un'altra demo, ma quando trascino lo stesso codice su questo progetto salta in cima. Non solo con i collegamenti ai div inline, ma anche per una semplice galleria di immagini.

Qualcuno l'ha sperimentato?

jquery css fancybox-2

— sheriffderek
fonte

nota: l'ho appena controllato sull'iPad e sull'iPhone e questo problema non si verifica ... tuttavia è in Chrome e Firefox.

— Sheriffderek

1

Se stai usando fancybox v2.1.5 sembra che il problema sia stato risolto nell'ultimo master che puoi scaricare dal modulo qui github.com/fancyapps/fancyBox/archive/master.zip quindi niente più hack ai file js o css .

— JFK

331

Questo può essere effettivamente fatto con un aiutante in Fancybox 2.

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

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

— Dave Kiss
fonte

11

Questo è sicuramente il modo per farlo. OP potrebbe contrassegnarlo come risposta accettata. Grazie per questo!

— cfx

Completamente d'accordo. La risposta accettata (per rimuovere il codice da fancybox2) è un hack.

— Rob Gonzalez

È un peccato che la risposta accettata non sia stata cambiata in un anno intero. Spero che i futuri utenti implementino questo e non la risposta "chop code out of the plugin".

— AndyWarren

5

Penso che questa risposta non risolva il problema. A molte persone potrebbe non piacere poter scorrere il contenuto dietro fancybox (questo è ciò che accadrà se lockedè impostato su false.) Questa è una soluzione temporanea a un problema che potrebbe crearne un altro per alcuni scenari. Questo era un bug ed è stato corretto nell'ultimo master github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK Sono d'accordo sul fatto che questa correzione potrebbe non essere l'ideale a causa dello scorrimento, ma l'ho testata con l'ultimo master e la pagina salta ancora all'inizio. Tuttavia, ritorna alla posizione originale quando fancybox è chiuso.

— Mr Jonny Wood

35

Jordanj77 è corretto ma la soluzione più semplice è semplicemente andare al foglio di stile jquery.fancybox.csse commentare la riga che dice overflow: hidden !important;nella sezione.fancybox-lock

— fast-riflessi
fonte

4

È meglio che usare helper perché con helper la pagina continua a scorrere sotto l'overlay con la rotellina del mouse. Commentare l'overflow impedisce che salti, ma anche la barra di scorrimento è ancora bloccata per la pagina principale.

— Panama Jack

14

Mi rendo conto che questa è una vecchia domanda, ma penso di aver trovato una buona soluzione. Il problema è che la casella di fantasia cambia il valore di overflow del corpo per nascondere le barre di scorrimento del browser.

Come sottolinea Dave Kiss, possiamo impedire a Fancy Box di farlo aggiungendo i seguenti parametri:

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

Ma ora possiamo scorrere la pagina principale mentre guardiamo la nostra finestra fantasia. È meglio che saltare all'inizio della pagina, ma probabilmente non è quello che vogliamo veramente.

Possiamo impedire lo scorrimento nel modo giusto aggiungendo i seguenti parametri:

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

E aggiungi queste funzioni da galambalaz. Vedi: Come disabilitare temporaneamente lo scorrimento?

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

— Joeran
fonte

9

Il problema è che fancyBox cambia il valore di overflow del corpo per nascondere le barre di scorrimento del browser. Non sono riuscito a trovare un'opzione per attivare questo comportamento.

Puoi rimuovere questa sezione del codice fancyBox per impedirlo:

if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}

— jordanj77
fonte

SÌÌ! Questo era anche il motivo per cui la mia pagina saltava di 20px a sinistra allora. Grazie! Hai risolto 2 dei miei problemi!

— Sheriffderek

Le barre di scorrimento ci sono ... ma io uso sempre overflow-y: scroll; comunque, quindi è un giusto compromesso per me.

— Sheriffderek

Immagino che ciò bloccherebbe la funzionalità della rotellina del mouse: continuerò a cercare anche altre soluzioni. Ma come ho detto, questo sta facendo il trucco per ora!

— Sheriffderek

3

Se stai usando fancybox v2.1.5 sembra che il problema sia stato risolto nell'ultimo master che puoi scaricare dal modulo qui github.com/fancyapps/fancyBox/archive/master.zip quindi niente più hack ai file js o css .

— JFK

1

Questa era la risposta migliore al momento ... e se per qualche motivo hai un sito legacy o qualcosa del genere, consideralo come riferimento.

— Sheriffderek

6

Nonostante il fatto che il modo corretto di risolvere questo problema sia tramite le opzioni fornite da fancybox ( fare riferimento a questa risposta ), i CSS potrebbero essere utilizzati per risolvere il problema. Non è necessario modificare il file css della libreria, basta aggiungerlo al foglio di stile principale dell'applicazione:

html.fancybox-lock {
    overflow: visible !important;
}

Il codice ripristina l'overflow originale dell'elemento. Il problema è che overflow: hidden;nasconde la barra di scorrimento <html>sull'elemento, che fa "saltare" la pagina all'inizio. Per preservare la posizione della barra di scorrimento, sovrascriviamo l'overflow conoverflow: visible;

— thexpand
fonte

Un altro motivo per cui ciò potrebbe accadere è perché l' <body>or / e il <html>potrebbe avereheight: 100%

— espansione

4

Anche questo ha aiutato

.fancybox-lock body {
    overflow: visible !important;
}

— hsobhy
fonte

1

Sovrascrivere gli stili di terze parti non è una buona idea, soprattutto se devi usare un modificatore! Important per interrompere la cascata. Incoraggio tutti a utilizzare la correzione fornita da Dave Kiss sopra, non questa.

— Fabian Schöner,

1

La risposta accettata non è completa in quanto in realtà non risolve il problema, lo evita semplicemente! Ecco una risposta più completa che ti dà effettivamente la funzionalità desiderata mentre risolvi il problema del salto della finestra:

        $('.fancybox').fancybox({
            helpers: {
                overlay: {
                    locked: false
                }
            },
            beforeShow:function(){ 
                $('html').css('overflowX', 'visible'); 
                $('body').css('overflowY', 'hidden'); 
            },
            afterClose:function(){ 
                $('html').css('overflowX', 'hidden');
                $('body').css('overflowY', 'visible'); 
            }
        });

— Ian
fonte

0

Forse questa risposta è in ritardo, ma forse potrebbe aiutare in futuro, se dopo aver cliccato / chiuso un'immagine fancybox fa scorrere il tuo sito web verso l'alto, potresti semplicemente eliminare:

F.trigger('onReady');

o meglio usare:

/*F.trigger('onReady');*/

Nella versione fancyBox: 2.1.5 (venerdì, 14 giugno 2013) quella parte del codice è alla riga 897.

— Nahomy Atias
fonte

0

Puoi effettivamente codificare in questo modo se stai usando la funzione predefinita di fancybox:

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });

— Steele Rocky
fonte

-4

L'ho risolto con:

overflow: hidden !important;

nel .fancybox-lockcorpo dentro jquery.fancybox.css. E la barra di scorrimento non salta :)

— user2684988
fonte

4

Questo è quello che hanno detto i riflessi veloci circa un mese fa.

— BoltClock