Я пытаюсь реализовать синхронизированную прокрутку для двоихDIV со следующим кодом.

DEMO

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

#div1 а также#div2 имеет тот же контент, но разных размеров, скажем

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

С этим кодом я столкнулся с двумя проблемами.

1) Прокрутка не очень хорошо синхронизирована, поскольку элементы div имеют разные размеры. Я знаю, это потому, что я прямоscrollTop стоимость. Мне нужно найти процент прокручиваемого контента и рассчитать соответствующийscrollTop значение для другогоdiv, Я не уверен, как найти фактическую высоту и текущую позицию прокрутки.

2) Эта проблема встречается только вfirefox, В Firefox прокрутка не гладкая, как в других браузерах. Я думаю, что это потому, что приведенный выше код создает бесконечный цикл событий прокрутки. Я не уверен, почему это происходит только с Firefox. Есть ли способ найти источник события прокрутки, чтобы я мог решить эту проблему.

Любая помощь будет принята с благодарностью.