Ich versuche, synchronisiertes Scrollen für zwei zu implementierenDIV mit dem folgenden Code.

DEMO

$(document).ready(function() {
    $("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
    });
    $("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
    });
});

#div1 und#div2 hat den gleichen Inhalt, aber verschiedene Größen, sagen wir

#div1 {
 height : 800px;
 width: 600px;
}
#div1 {
 height : 400px;
 width: 200px;
}

Bei diesem Code treten zwei Probleme auf.

1) Das Scrollen ist nicht gut synchronisiert, da die Divs unterschiedlich groß sind. Ich weiß, das liegt daran, dass ich das direkt einstellescrollTop Wert. Ich muss den Prozentsatz des gescrollten Inhalts finden und entsprechend berechnenscrollTop Wert für den anderendiv. Ich bin nicht sicher, wie ich die tatsächliche Höhe und die aktuelle Bildlaufposition finde.

2) Dieses Problem ist nur in zu findenfirefox. In Firefox ist das Scrollen nicht reibungslos wie in anderen Browsern. Ich denke, das liegt daran, dass der obige Code eine Endlosschleife von Scroll-Ereignissen erzeugt. Ich bin mir nicht sicher, warum das nur mit Firefox passiert. Gibt es eine Möglichkeit, die Quelle des Bildlaufereignisses zu finden, damit ich dieses Problem beheben kann?

Jede Hilfe wäre sehr dankbar.