Wie erreicht man ein reibungsloses und proportionales synchronisiertes Scrollen in jQuery: Eine Lösung für das Firefox-Verzögerungsproblem?

Dilemma des synchronisierten Scrollens in jQuery: Erzielen eines reibungslosen und proportionalen Scrollens

Die Implementierung des synchronisierten Scrollens kann eine Herausforderung sein, wenn es um Elemente unterschiedlicher Größe geht. Um dies zu beheben, müssen Sie den Prozentsatz des gescrollten Inhalts ermitteln und den entsprechenden scrollTop-Wert für das andere Element berechnen.

In Ihrem Fall können Sie diese Formel verwenden: scrollTop / (scrollHeight – offsetHeight). Dies ergibt einen Wert zwischen 0 und 1, der den Prozentsatz des gescrollten Elements darstellt.

Außerdem kann es zu einem Problem kommen, bei dem das Scrollen in Firefox träge wird. Dies liegt daran, dass Ihr aktueller Code versehentlich eine endlose Schleife von Scroll-Ereignissen erzeugt. Die Verwendung von off() zum vorübergehenden Aufheben der Bindung des Listeners, das Anpassen von scrollTop und das anschließende erneute Binden können dieses Problem lösen.

Hier ist ein optimierter Codeausschnitt, der beide Probleme behebt:

var $divs = $('#div1, #div2');

var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    
    // Firefox workaround: Rebinding without delay is insufficient.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}

$divs.on( 'scroll', sync);

Dieser Code sorgt für proportionales Scrollen und verhindert gleichzeitig die Endlosschleife von Scroll-Ereignissen in Firefox. Um eine funktionierende Demonstration anzusehen, besuchen Sie dieses jsfiddle: http://jsfiddle.net/b75KZ/5/

Das obige ist der detaillierte Inhalt vonWie erreicht man ein reibungsloses und proportionales synchronisiertes Scrollen in jQuery: Eine Lösung für das Firefox-Verzögerungsproblem?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!