Wie erreicht man in jQuery ein reibungsloses synchronisiertes Scrollen mit unterschiedlichen Elementgrößen?

Synchronisiertes Scrollen in jQuery: Herausforderungen und Lösungen

Der Bedarf an synchronisiertem Scrollen entsteht häufig, wenn mit Elementen unterschiedlicher Größe gearbeitet wird, die ähnliche Inhalte anzeigen . Während eine grundlegende Scroll-Synchronisierung durch die direkte Einstellung des scrollTop-Werts erreicht werden kann, stößt sie auf Einschränkungen, wenn die Elemente unterschiedliche Abmessungen haben.

Adressierung der Scroll-Synchronisierung:

Um trotzdem proportionales Scrollen sicherzustellen Bei unterschiedlichen Elementgrößen muss der Prozentsatz des gescrollten Inhalts berücksichtigt werden. Die Berechnung element.scrollTop / (element.scrollHeight - element.offsetHeight) ergibt diesen Prozentsatz. Die Multiplikation dieses Werts mit dem Wert des anderen Elements (element.scrollHeight - element.offsetHeight) ergibt den entsprechenden scrollTop-Wert.

Endlosschleife in Firefox verhindern:

Bei Firefox tritt ein Problem auf wobei der Synchronisierungscode eine Endlosschleife erzeugt. Um dieses Problem zu beheben, kann der Scroll-Ereignis-Listener vorübergehend entfernt werden, während der scrollTop-Wert festgelegt wird, und dann erneut gebunden werden.

Code-Implementierung:

Der folgende Code implementiert die Lösung :

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

Dieser Code basiert auf der Variablen $divs, die angepasst werden sollte, um auf die gewünschten Elemente abzuzielen. Es enthält auch eine Firefox-spezifische Problemumgehung, um das Listener-Problem zu verhindern.

Das obige ist der detaillierte Inhalt vonWie erreicht man in jQuery ein reibungsloses synchronisiertes Scrollen mit unterschiedlichen Elementgrößen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!