Comment synchroniser la position de défilement de deux div ?

Question

Je veux avoir 2 divs dimensionnés à une largeur particulière (c'est-à-dire 500px). L'un au-dessus de l'autre aligné horizontalement.

La case du haut doit masquer sa barre de défilement, celle du bas doit afficher une barre de défilement et lorsque l'utilisateur fait défiler, j'aimerais que le décalage de la case du haut change à la valeur de la case du bas. Ainsi, lorsque le DIV inférieur défile horizontalement, il apparaît que le DIV supérieur défile également à l'unisson.

Je suis heureux de le faire dans Jquery si cela facilite le processus.

Answer 1

Je cherchais une solution à double sens et grâce à vous tous, vos contributions m'ont aidé à le faire :

 $('#cells').on('scroll', function () {
$('#hours').scrollTop($(this).scrollTop());
$('#days').scrollLeft($(this).scrollLeft());});

Voir sur JSFiddle : https://jsfiddle.net/sgcer/1274/

J'espère que ça aidera quelqu'un un jour :-)

Answer 2

Une autre solution qui évite ce problème de bouclage et permet d'obtenir un défilement fluide. Cela garantit que seul l'élément focalisé reçoit l'événement de défilement.

 let activePre: HTMLPreElement = null;
document.querySelectorAll(".scrollable-pre").forEach(function(pre: HTMLPreElement) {
    pre.addEventListener("mouseenter", function(e: MouseEvent) {
        let pre = e.target as HTMLPreElement;
        activePre = pre;
    });

    pre.addEventListener("scroll", function(e: MouseEvent) {
        let pre = e.target as HTMLPreElement;

        if (activePre !== pre) {
            return;
        }

        if (pre !== versionBasePre) {
            versionBasePre.scrollTop = pre.scrollTop;
            versionBasePre.scrollLeft = pre.scrollLeft;
        }

        if (pre !== versionCurrentPre) {
            versionCurrentPre.scrollTop = pre.scrollTop;
            versionCurrentPre.scrollLeft = pre.scrollLeft;
        }

    });
});