Comment obtenir un défilement synchronisé fluide entre deux DIV avec jQuery ?

Défilement synchronisé avec jQuery : surmonter les problèmes de synchronisation

Pour obtenir un défilement synchronisé entre deux éléments DIV, il est crucial de tenir compte des différences dans leurs tailles. Le code fourni définit directement la valeur scrollTop, ce qui entraîne une synchronisation incohérente. Pour résoudre ce problème, il est nécessaire de calculer le pourcentage de contenu défilé et d'ajuster la valeur scrollTop en conséquence.

Pour déterminer la hauteur réelle et la position actuelle du défilement, vous pouvez utiliser la formule suivante :

percentage = scrollTop / (scrollHeight - offsetHeight)

Ce calcul fournit une valeur comprise entre 0 et 1, représentant le pourcentage de contenu défilé. En multipliant les autres DIV (scrollHeight - offsetHeight) par cette valeur, vous obtenez la valeur scrollTop correspondante pour le défilement proportionnel.

De plus, pour éviter une boucle infinie d'événements de défilement dans Firefox, vous devez temporairement dissocier l'écouteur, définir le scrollTop, puis reliez à nouveau l'auditeur :

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

En implémentant ces améliorations, vous pouvez obtenir un défilement fluide et synchronisé entre les éléments DIV, même avec des tailles variables, et éviter le problème potentiel de boucle infinie dans Firefox.

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!