Eu estou tentando implementar a rolagem sincronizada para doisDIV com o seguinte código.

DEMO

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

#div1 e#div2 é ter o mesmo conteúdo, mas tamanhos diferentes, digamos

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

Com este código, estou enfrentando dois problemas.

1) A rolagem não está bem sincronizada, já que os divs são de tamanhos diferentes. Eu sei, isso é porque, eu estou definindo diretamente oscrollTop valor. Eu preciso encontrar a porcentagem de conteúdo rolado e calcularscrollTop valor para o outrodiv. Não tenho certeza, como encontrar a altura real e a posição de rolagem atual.

2) Esta questão só é encontrada emfirefox. No firefox, a rolagem não é suave como em outros navegadores. Eu acho que isso porque o código acima está criando um loop infinito de eventos de rolagem. Não tenho certeza, por que isso está acontecendo apenas com o Firefox. Existe alguma maneira de encontrar a origem do evento de rolagem, para que eu possa resolver esse problema.

Qualquer ajuda seria muito apreciada.