Wie implementiert man mit jQuery ein reibungsloses und synchronisiertes Scrollen zwischen zwei Divs?

Synchronisiertes Scrollen reibungslos gemacht

Das Implementieren eines synchronisierten Scrollens zwischen zwei DIVs mithilfe von jQuery kann mit dem folgenden Code erreicht werden:

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

Dieser Code stößt jedoch auf zwei Herausforderungen:

1. Unsynchronisiertes Scrollen aufgrund unterschiedlicher Div-Größen

Die Berechnung der proportionalen Scroll-Position erfordert die Bestimmung des Prozentsatzes des gescrollten Inhalts. Dies kann wie folgt erreicht werden:

percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);

Durch Multiplizieren der Höhe und des Versatzes des anderen Div mit diesem Prozentsatz wird ein proportionales Scrollen sichergestellt.

2. Nicht ganz so reibungsloses Scrollen in Firefox

Um eine Endlosschleife von Scroll-Ereignissen in Firefox zu verhindern, sollten Sie die Bindung des Listeners vorübergehend aufheben:

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);
    setTimeout(function(){ $other.on('scroll', sync ); }, 10);
}
$divs.on( 'scroll', sync);

Diese Lösung deaktiviert den Listener vor der Anpassung Das scrollTop bindet es nach einer kurzen Verzögerung erneut und sorgt für reibungsloses Scrollen in Firefox.

Um diese Lösung zu demonstrieren, sehen Sie sich die interaktive JSFiddle an: http://jsfiddle.net/b75KZ/5/

Das obige ist der detaillierte Inhalt vonWie implementiert man mit jQuery ein reibungsloses und synchronisiertes Scrollen zwischen zwei Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!