Comment implémenter un défilement fluide et synchronisé entre deux divs avec jQuery ?

Défilement synchronisé rendu fluide

La mise en œuvre du défilement synchronisé entre deux DIV à l'aide de jQuery peut être réalisée avec le code suivant :

$(document).ready(function() {
    $("#div1").scroll(function () {
        $("#div2").scrollTop($("#div1").scrollTop());
    });
    $("#div2").scroll(function () {
        $("#div1").scrollTop($("#div2").scrollTop());
    });
});

Cependant, ce code rencontre deux défis :

1. Défilement non synchronisé en raison de différentes tailles de division

Le calcul de la position de défilement proportionnelle nécessite de déterminer le pourcentage de contenu défilé. Ceci peut être réalisé en utilisant :

percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);

Multiplier la hauteur et le décalage de l'autre div par ce pourcentage garantit un défilement proportionnel.

2. Défilement pas si fluide dans Firefox

Pour éviter une boucle infinie d'événements de défilement dans Firefox, envisagez de dissocier temporairement l'écouteur :

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

Cette solution désengage l'écouteur avant d'ajuster le scrollTop, le relie après un bref délai et assure un défilement fluide dans Firefox.

Pour démontrer cette solution, consultez le JSFiddle interactif : 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!