Rolagem sincronizada usando jQuery?
Eu estou tentando implementar a rolagem sincronizada para doisDIV
com o seguinte código.
$(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.