Wenn eine Fancybox 2 aktiviert ist, blinkt eine Bildlaufleiste auf der übergeordneten Seite, wodurch der Inhalt nach links und wieder zurück verschoben wird.

Haben Sie Ideen, wie Sie das Bildlaufleistenproblem umgehen können? Immer wenn eine Fancybox auf meiner Seite aktiviert wird, erzeugt sie während der Initialisierung eine Bildlaufleiste und blitzt dann wieder weg - aber das verschiebt die ganze Seite für einen Sekundenbruchteil. Nicht sehr elegant!Wenn eine Fancybox 2 aktiviert ist, blinkt eine Bildlaufleiste auf der übergeordneten Seite, wodurch der Inhalt nach links und wieder zurück verschoben wird.

Ist das ein Fehler mit Fancybox 2?

-Code verwendet Fancybox zu aktivieren:

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

Quelle

2012-03-29 JayDee

wenn Klick Bildlaufleiste aktivieren einfach den folgenden Code im Code jQuery hinzufügen

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

und wenn in der Nähe der fancybox fügen Sie den folgenden Code

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

Quelle

2012-03-29 11:41:12

Gute Lösung, danke. Schade nur, dass ich das CSS mit einer Funktion modifizieren muss, um einen Fehler zu beheben! – JayDee

Ich glaube nicht, dass es sich um einen Fehler handelt (Sie müssten vorher mehr Elemente bereitstellen, um diese Aussage zu treffen). Es sollte Ihre eigene Seite css-Einstellungen sein (ein floating-Element zum Beispiel), dass, wenn fancybox an den 'body' angehängt wird, es eine zusätzliche Lücke in der Körperhöhe erzeugen kann, so dass die Bildlaufleisten erscheinen. Ich habe dieses Verhalten noch nie gesehen, daher ist die obige Problemumgehung sehr spezifisch. – JFK

Das funktioniert für mich, weil ich die 'overflow-y: scroll' Eigenschaft auf html/body wie OP wahrscheinlich hatte, aber Sie können immer noch die 2. Bildlaufleiste während des Effekts verschwinden sehen. Es wäre ideal, wenn es niemals erscheinen würde. http://jsfiddle.net/NVHWw/ – RCNeil

Vergewissern Sie sich, dass Ihre Fancybox nicht zweimal initialisiert wird. Ich hatte jahrelange Schmerzen und als ich dachte, dass Fancybox 2 Bugs mit AJAX-Fenstern hatte, war es meine Schuld, dass ich es mehrfach initialisieren ließ.

Quelle

2012-07-05 02:28:19

Verwenden Sie html { overflow-y: scroll; }? Dies kollidiert mit Fancybox. Fancybox fügt Ihrer body, .fancybox-lock, eine Klasse hinzu, die den Inhalt 17px nach rechts verschiebt.

Das Skript entfernt vom Rollbalken „body“ Elemente (durch „fancybox-lock“ Klasse Anwendung) und dann gleicht sie durch Hinzufügen von Inhalten Rande Verschiebung zu vermeiden.

Sie es wie so überschreiben können:

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

Lesen Sie mehr: https://github.com/fancyapps/fancyBox/issues/340

Quelle

2012-08-27 12:53:53 Nix

Dies ist wahrscheinlich, was das OP erlebte, als ich ich selbst war. Ich hatte 'overflow-y: scroll' eingerichtet, also wieso es zweimal erschien. IMO, dies sollte die richtige Antwort sein, da es wahrscheinlich die Ursache des Problems ist und nicht übersehen werden sollte. – RCNeil

In fancy box 2 meiste Zeit Bildlaufleiste zeigt, Um dies zu vermeiden haben wir Höhe einzustellen und Breite des Körpers die müssen in iframe laden,

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

Dies ist eine Methode. Es gibt mehr Möglichkeiten, diesen Fehler zu lösen.

Quelle

2012-09-25 11:07:37 shihabudheen

Bearbeiten Sie die Datei jquery.fancybox.css in folgenden Orten

.fancybox-lock { 
    overflow: hidden; 
}

wird

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

und

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

wird

Quelle

2012-10-02 16:47:09 ajaykarwal

Dies behebt das Problem nicht in Firefox. Es stellt es auch in Safari vor. – knorthfield

-1

In Version: 2.1.1 entferne ich Zeile zwischen Zeile 1743 - 1749. Schlechte Art ja, aber Arbeit.Diese^_^

Wechsel:

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

An:

if (obj.fixed && !isTouch) { 

} else { 
    this.update(); 
}

Quelle

2012-10-09 10:57:02 user1634982

Fügen Sie einfach zu Optionen nächsten Code:

helpers: { 
    overlay: { 
     locked: false 
    } 
}

Quelle

2013-02-14 17:48:47 pheonix

das ist die echte lösung – Ruben

imo, das ist die echte antwort auch. Wir müssen keine der zugrunde liegenden CSS ändern! +1 – Alex

dies funktionierte für mich (die anderen Vorschläge nicht) – scientiffic

nur versuchen, einen Spielraum hinzuzufügen. Es hat mir geholfen.

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

Quelle

2014-06-03 15:49:55

Wenn eine Fancybox 2 aktiviert ist, blinkt eine Bildlaufleiste auf der übergeordneten Seite, wodurch der Inhalt nach links und wieder zurück verschoben wird.

Antwort

Verwandte Themen