Fancybox2 / Fancybox bewirkt, dass die Seite nach oben springt

105

Ich habe Fancybox2 auf einer Dev-Site implementiert.

Wenn ich die Fancybox einschalte (auf den Link klicken usw.), verschiebt sich das gesamte HTML dahinter - und geht nach oben. Ich habe es in einer anderen Demo gut funktioniert, aber wenn ich den gleichen Code in dieses Projekt ziehe, springt es nach oben. Nicht nur mit den Links zu Inline-Divs, sondern auch für eine einfache Bildergalerie.

Hat das jemand erlebt?

jquery css fancybox-2

— Sheriffderek
quelle

Hinweis: Ich habe dies gerade auf dem iPad und dem iPhone überprüft und dieses Problem tritt nicht auf ... es ist jedoch in Chrome und Firefox.

— Sheriffderek

1

Wenn Sie Fancybox v2.1.5 verwenden, wurde das Problem anscheinend im neuesten Master behoben, den Sie hier herunterladen können: github.com/fancyapps/fancyBox/archive/master.zip, sodass keine Hacks mehr auf die js- oder css-Dateien erfolgen .

— JFK

331

Dies kann tatsächlich mit einem Helfer in Fancybox 2 durchgeführt werden.

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

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

— Dave Kiss
quelle

11

Dies ist definitiv der richtige Weg. OP sollte dies als akzeptierte Antwort markieren. Danke dafür!

— cfx

Stimme voll und ganz zu. Die akzeptierte Antwort (um Code aus Fancybox2 zu entfernen) ist ein Hack.

— Rob Gonzalez

Es ist bedauerlich, dass die akzeptierte Antwort seit einem Jahr nicht mehr geändert wurde. Hoffe, zukünftige Benutzer implementieren dies und nicht die Antwort "Code aus dem Plugin hacken".

— AndyWarren

5

Ich denke, diese Antwort löst das Problem nicht. Viele Benutzer möchten möglicherweise nicht in der Lage sein, den Inhalt hinter der Fancybox zu scrollen (dies geschieht, wenn dies festgelegt lockedist false). Dies ist eine vorübergehende Problemumgehung für ein Problem, das in einigen Szenarien möglicherweise ein anderes Problem verursacht. Dies war ein Fehler und wurde im neuesten Master github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK Ich stimme zu, dass dieses Update aufgrund des Bildlaufs möglicherweise nicht ideal ist, aber ich habe es mit dem neuesten Master getestet und die Seite springt immer noch nach oben. Es wird jedoch wieder in die ursprüngliche Position zurückgesetzt, wenn die Fancybox geschlossen ist.

— Herr Jonny Wood

35

Jordanj77 ist korrekt, aber die einfachste Lösung besteht darin, einfach zum Stylesheet zu gehen jquery.fancybox.cssund die Zeile overflow: hidden !important;im Abschnitt zu kommentieren.fancybox-lock

— schnelle Reflexe
quelle

4

Dies ist besser als die Verwendung von Helper, da mit Helper die Seite mit dem Mausrad weiter unter die Überlagerung rollt. Das Auskommentieren des Überlaufs verhindert, dass er springt, aber auch die Bildlaufleiste ist für die Hauptseite weiterhin gesperrt.

— Panama Jack

14

Mir ist klar, dass dies eine alte Frage ist, aber ich denke, ich habe eine gute Lösung dafür gefunden. Das Problem ist, dass das ausgefallene Feld den Überlaufwert des Körpers ändert, um die Bildlaufleisten des Browsers auszublenden.

Wie Dave Kiss betont, können wir Fancy Box daran hindern, dies zu tun, indem wir die folgenden Parameter hinzufügen:

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

Aber jetzt können wir die Hauptseite scrollen, während wir unser ausgefallenes Box-Fenster betrachten. Es ist besser als an den Anfang der Seite zu springen, aber es ist wahrscheinlich nicht das, was wir wirklich wollen.

Wir können das richtige Scrollen verhindern, indem wir die nächsten Parameter hinzufügen:

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

Und fügen Sie diese Funktionen aus Galambalaz hinzu. Siehe: So deaktivieren Sie das Scrollen vorübergehend?

    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
quelle

9

Das Problem ist, dass FantasieBox den Überlaufwert des Körpers ändert, um die Browser-Bildlaufleisten auszublenden. Ich konnte keine Option finden, um dieses Verhalten umzuschalten.

Sie können diesen Abschnitt des FancyBox-Codes entfernen, um dies zu verhindern:

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

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

— jordanj77
quelle

YAY! Das war auch der Grund, warum meine Seite damals 20 Pixel nach links sprang. Vielen Dank! Du hast 2 meiner Probleme gelöst!

— Sheriffderek

Die Bildlaufleisten sind da ... aber ich benutze immer overflow-y: scroll; Wie auch immer, es ist ein fairer Kompromiss für mich.

— Sheriffderek

Ich denke, das würde die Mausradfunktionalität blockieren - ich werde auch weiterhin nach anderen Lösungen suchen. Aber wie gesagt, das macht den Trick fürs Erste!

— Sheriffderek

3

Wenn Sie Fancybox v2.1.5 verwenden, wurde das Problem anscheinend im neuesten Master behoben, den Sie hier herunterladen können: github.com/fancyapps/fancyBox/archive/master.zip, sodass keine Hacks mehr auf die js- oder css-Dateien erfolgen .

— JFK

1

Dies war zu dieser Zeit die beste Antwort ... und wenn Sie aus irgendeinem Grund eine Legacy-Site oder etwas anderes haben - sehen Sie dies als Referenz.

— Sheriffderek

6

Trotz der Tatsache, dass die richtige Lösung dieses Problems über die Optionen erfolgt, die Fancybox bietet ( siehe diese Antwort ), könnte CSS zur Lösung des Problems verwendet werden. Die CSS-Datei der Bibliothek muss nicht bearbeitet werden. Fügen Sie diese einfach zum Haupt-Stylesheet der Anwendung hinzu:

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

Der Code setzt den ursprünglichen Überlauf des Elements zurück. Das Problem ist, dass overflow: hidden;die Bildlaufleiste des <html>Elements ausgeblendet wird , wodurch die Seite nach oben "springt". Um die Position der Bildlaufleiste beizubehalten, überschreiben wir den Überlauf mitoverflow: visible;

— thexpand
quelle

Ein weiterer Grund, warum dies passieren könnte, ist, dass die <body>oder / und die <html>möglicherweise habenheight: 100%

— thexpand

4

Dies hat auch geholfen

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

— hsobhy
quelle

1

Das Überschreiben von Stilen von Drittanbietern ist keine gute Idee, insbesondere wenn Sie einen wichtigen Modifikator verwenden müssen, um die Kaskade zu durchbrechen. Ich ermutige alle, das von Dave Kiss oben bereitgestellte Update zu verwenden, nicht dieses.

— Fabian Schöner

1

Die akzeptierte Antwort ist nicht vollständig, da sie das Problem nicht wirklich löst, sondern es nur vermeidet! Hier ist eine vollständigere Antwort, die Ihnen tatsächlich die gewünschte Funktionalität bietet, während Sie das Problem mit dem Fenstersprung beheben:

        $('.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
quelle

0

Vielleicht ist diese Antwort schon spät, aber vielleicht könnte sie in Zukunft helfen, wenn Sie nach dem Klicken / Schließen einer Bild-Fancybox Ihre Website nach oben scrollen lassen, können Sie einfach Folgendes löschen:

F.trigger('onReady');

oder besser nutzen:

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

In der FancyBox-Version: 2.1.5 (Fr, 14. Juni 2013) befindet sich dieser Teil des Codes in Zeile 897.

— Nahomy Atias
quelle

0

Sie können tatsächlich so codieren, wenn Sie die Fancybox-Standardfunktion verwenden:

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

— Steele Rocky
quelle

-4

Ich habe es behoben mit:

overflow: hidden !important;

im .fancybox-lockKörper in jquery.fancybox.css. Und Bildlaufleiste springt nicht :)

— user2684988
quelle

4

Das haben schnelle Reflexe vor etwa einem Monat gesagt.

— BoltClock