Comment obtenir un défilement synchronisé fluide avec différentes tailles d'éléments dans jQuery ?

Défilement synchronisé dans jQuery : défis et solutions

Le besoin d'un défilement synchronisé survient souvent lorsque l'on travaille avec des éléments de différentes tailles qui affichent un contenu similaire . Bien que la synchronisation de base du défilement puisse être obtenue à l'aide du paramètre de valeur direct scrollTop, elle est confrontée à des limites lorsque les éléments ont des dimensions différentes.

Adressage de la synchronisation du défilement :

Pour garantir un défilement proportionnel malgré différentes tailles d'éléments, le pourcentage du contenu défilé doit être pris en compte. Le calcul element.scrollTop / (element.scrollHeight - element.offsetHeight) donne ce pourcentage. La multiplication de cette valeur par celle de l'autre élément (element.scrollHeight - element.offsetHeight) fournit la valeur scrollTop correspondante.

Prévention de la boucle infinie dans Firefox :

Firefox rencontre un problème où le code de synchronisation crée une boucle infinie. Pour résoudre ce problème, l'écouteur d'événement scroll peut être temporairement supprimé lors de la définition de la valeur scrollTop, puis rebondi.

Implémentation du code :

Le code suivant implémente la solution :

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

Ce code s'appuie sur la variable $divs, qu'il convient d'ajuster pour cibler les éléments souhaités. Il intègre également une solution de contournement spécifique à Firefox pour éviter le problème d'écoute.

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!