Comment obtenir un défilement synchronisé fluide et proportionnel dans jQuery : une solution au problème de décalage de Firefox ?

Dilemme de défilement synchronisé dans jQuery : obtenir un défilement fluide et proportionnel

La mise en œuvre du défilement synchronisé peut être un défi lorsqu'il s'agit d'éléments de différentes tailles. Pour résoudre ce problème, vous devez déterminer le pourcentage de contenu défilé et calculer la valeur scrollTop correspondante pour l'autre élément.

Dans votre cas, vous pouvez utiliser cette formule : scrollTop / (scrollHeight - offsetHeight). Cela donne une valeur comprise entre 0 et 1, qui représente le pourcentage de l'élément qui a défilé.

De plus, vous pouvez rencontrer un problème où le défilement dans Firefox devient lent. Cela vient du fait que votre code actuel crée par inadvertance une boucle incessante d'événements de défilement. Utiliser off() pour dissocier temporairement l'écouteur, ajuster le scrollTop, puis le relier à nouveau peut résoudre ce problème.

Voici un extrait de code optimisé qui résout les deux problèmes :

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);

Ce code assure un défilement proportionnel tout en empêchant la boucle infinie des événements de défilement dans Firefox. Pour voir une démonstration de travail, visitez ce jsfiddle : http://jsfiddle.net/b75KZ/5/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!