2012-03-29 5 views
9

Tutte le idee come risolvere il problema barra di scorrimento? Ogni volta che una fancybox viene attivata sul mio sito crea una barra di scorrimento durante l'inizializzazione e poi torna a lampeggiare di nuovo, ma questo sposta l'intera pagina per una frazione di secondo. Non molto elegante!Quando un fancybox 2 viene attivato, una barra di scorrimento lampeggia sulla pagina padre che causano il contenuto di spostamento a sinistra e poi di nuovo

Si tratta di un bug con Fancybox 2?

codice utilizzato per attivare Fancybox:

$('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     $.fancybox({ 
      'href' : url, 
      closeBtn : true, 
      width : '467', 
      height : '609', 
      fitToView : false, 
      padding : '5', 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
    }); 

risposta

5

quando Clicca per attivare la barra di scorrimento è sufficiente aggiungere il seguente codice nel tuo codice jQuery

$("body").css("overflow","hidden"); // hide body scrollbar 

e quando vicino la fancybox aggiungere il seguente codice

$("body").css("overflow","auto"); // show body scrollbar 
+0

Buona soluzione, grazie. Peccato solo dover modificare il CSS con una funzione per correggere un bug! – JayDee

+1

Non penso sia un bug (prima di fare questa affermazione dovresti fornire più elementi). Dovrebbero essere le impostazioni della tua pagina css (un elemento fluttuante per esempio) che quando fancybox viene aggiunto al 'body', può creare uno spazio extra nell'altezza del corpo in modo che le barre di scorrimento appaiano. Non ho mai visto questo comportamento, quindi la soluzione sopra descritta è molto specifica. – JFK

+0

Questo funziona per me, perché ho probabilmente la proprietà 'overflow-y: scroll' su html/body come OP, ma puoi ancora vedere la seconda scrollbar scomparire durante l'effetto. Sarebbe l'ideale non averlo mai apparire. http://jsfiddle.net/NVHWw/ – RCNeil

1

Assicurati che il tuo Fancybox non viene inizializzata due volte. Ho sofferto anni di dolore e quando pensavo che Fancybox 2 avesse problemi con le finestre AJAX, è stata colpa mia lasciarlo inizializzare più volte.

3

Usi html { overflow-y: scroll; }? Questo si scontra con Fancybox. Fancybox aggiunge una classe al tuo body, chiamato .fancybox-lock, che sposta il contenuto 17px a destra.

Lo script rimuove le barre di scorrimento dall'elemento "body" (applicando la classe "fancybox-lock") e quindi li compensa aggiungendo margine per evitare lo spostamento del contenuto.

È possibile ignorare in questo modo:

.fancybox-lock { margin: 0 !important; } 

Per saperne di più: https://github.com/fancyapps/fancyBox/issues/340

+1

questo è probabilmente ciò che l'OP stava vivendo, come me stesso. Ho avuto l'impostazione 'overflow-y: scroll', quindi ecco perchè è apparso due volte. IMO, questa dovrebbe essere la risposta corretta in quanto è molto probabilmente la causa principale del problema e non dovrebbe essere trascurata. – RCNeil

0

nella casella fantasia 2 più tempo mostra barra di scorrimento, per evitare questo dobbiamo impostare l'altezza e la larghezza del corpo che devono caricare iframe,

esempio,

<body style="height:300px;width:200px;overflow:hidden"> 
//body content come here 
</body> 

Si tratta di un metodo, ci sarebbero alcuni più altri modi per risolvere questo bug.

12

Modificare il file jquery.fancybox.css nei seguenti luoghi

.fancybox-lock { 
    overflow: hidden; 
} 

diventa

.fancybox-lock { 
    overflow: hidden; 
    margin-right:0 !important; <-- Add this 
} 

e

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: scroll; 
} 

diventa

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: auto; <-- 
} 
+0

Questo non risolve il problema in firefox. Lo INTRODUCE anche in Safari. – knorthfield

-1

Nella versione: 2.1.1 Ho rimuovere la linea tra la linea 1743 - 1749. Bad modo sì, ma il lavoro.^ _^

Modifica questo:

if (obj.fixed && !isTouch) { 
    if (obj.locked) { 
     this.el.addClass('fancybox-lock'); 
     if (this.margin !== false) { 
      $('body').css('margin-right', getScalar(this.margin) + obj.scrollbarWidth); 
     } 
    } 
} else { 
    this.update(); 
} 

A:

if (obj.fixed && !isTouch) { 

} else { 
    this.update(); 
} 
22

Basta aggiungere alle opzioni codice successivo:

helpers: { 
    overlay: { 
     locked: false 
    } 
} 
+2

questa è la vera soluzione – Ruben

+1

imo, questa è la vera risposta pure. non dobbiamo modificare nessuno dei css sottostanti! +1 – Alex

+0

questo ha funzionato per me (gli altri suggerimenti no) – scientiffic

0

solo cercare di aggiungere un margine. Mi ha aiutato.

.fancybox-lock { 
    overflow: hidden !important; 
    width: auto; 
    margin-right: 20px; 
}