Estoy tratando de implementar el desplazamiento sincronizado para dosDIV Con el siguiente código.

MANIFESTACIÓN

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

#div1 y#div2 es tener el mismo contenido pero diferentes tamaños, digamos

#div1 {
 height : 800px;
 width: 600px;
}
#div1 {
 height : 400px;
 width: 200px;
}

Con este código, me enfrento a dos problemas.

1) El desplazamiento no está bien sincronizado, ya que los divs son de diferentes tamaños. Lo sé, esto es porque, estoy configurando directamente elscrollTop valor. Necesito encontrar el porcentaje de contenido desplazado y calcular el correspondientescrollTop valor para el otrodiv. No estoy seguro, cómo encontrar la altura real y la posición actual de desplazamiento.

2) Este problema solo se encuentra enfirefox. En Firefox, el desplazamiento no es tan fácil como en otros navegadores. Pienso esto porque el código anterior está creando un bucle infinito de eventos de desplazamiento. No estoy seguro de por qué esto solo está sucediendo con Firefox. ¿Hay alguna forma de encontrar el origen del evento de desplazamiento, para que pueda resolver este problema?

Cualquier ayuda sería muy apreciada.