Wie erreicht man mit jQuery ein reibungsloses synchronisiertes Scrollen zwischen zwei DIVs?

Synchronisiertes Scrollen mit jQuery: Synchronisierungsprobleme überwinden

Um synchronisiertes Scrollen zwischen zwei DIV-Elementen zu erreichen, ist es wichtig, Unterschiede in ihren Elementen zu berücksichtigen Größen. Der bereitgestellte Code legt den scrollTop-Wert direkt fest, was zu einer inkonsistenten Synchronisierung führt. Um dieses Problem zu beheben, ist es notwendig, den Prozentsatz des gescrollten Inhalts zu berechnen und den scrollTop-Wert entsprechend anzupassen.

Um die tatsächliche Höhe und aktuelle Scrollposition zu bestimmen, können Sie die folgende Formel verwenden:

percentage = scrollTop / (scrollHeight - offsetHeight)

Diese Berechnung liefert einen Wert zwischen 0 und 1, der den Prozentsatz des gescrollten Inhalts darstellt. Das Multiplizieren der anderen DIVs (scrollHeight - offsetHeight) mit diesem Wert ergibt den entsprechenden scrollTop-Wert für proportionales Scrollen.

Um eine Endlosschleife von Scroll-Ereignissen in Firefox zu verhindern, sollten Sie außerdem den Listener vorübergehend entbinden und festlegen scrollTop-Wert und binden Sie dann den Listener erneut:

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

Durch die Implementierung dieser Verbesserungen können Sie einen reibungslosen und synchronisierten Bildlauf zwischen DIV-Elementen auch bei unterschiedlichen Größen erreichen und das potenzielle Endlosschleifenproblem in Firefox vermeiden.

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